react-alphabet-soup

Yes, react-instagram-feed would be a better name but it was taken...

Quick start

1. Install

npm install --save react-alphabet-soup || yarn add react-alphabet-soup

2. Use the component

//...
  <AlphabetSoup text="AWESOME TEXT" fontSize="24px" sorting="costFunction" costFunctionYWeight={3} />
//...

API

Table of Contents

• AlphabetSoup
  • Parameters
• AlphabetSoupWithDimensions
  • Parameters
• createStyles
  • Parameters
• getCenters
  • Parameters
• getCharHorizontalPos
  • Parameters
• getCharVerticalPos
  • Parameters
• measureText
  • Parameters

AlphabetSoup

This component renders and animates the text as an Alphabet Soup

Parameters

• props Props
• text string text to render
• width number width of the space in pixels (optional, default 100)
• height number height of the space in pixels (optional, default 100)
• fontSize string fontSize of the text when tidy. (optional, default '20px')
• lineHeight number lineHeight of the text when tidy. (optional, default 1.3)
• fontFamily string fontFamily of the text. (optional, default 'Georgia')
• transitionStyle string style of the transition animation. Values: 'constant' | 'progressive' | 'random'. (optional, default 'constant')
• transitionSpeedMultiplier string speed multiplier for the transition. Default transitions take 1s. The multiplier can increase and decrease that. (optional, default 1)
• transitionTimingFunction string is the transition timing function used on CSS transition. e.g. ease, ease-in, cubic-bezier(1, 0.24, 0.25, 1), ... (optional, default 'ease')
• maxIterations number maximum number of iterations that the Lloyd's relaxation will run through. More iterations mean a more optimal solution, however it can take a lot more time. Less iteration generate less optimal solutions. (optional, default 20)
• acceptableError number error that if achieved between iterations the relaxation process will stop, even if the iterations are not completed. Bigger error with compute results faster. (optional, default 1e-6)
• sorting string sorting applied to the generated points. 'none' no sorting applied. 'sortByX' sort ascending points using X. 'sortByY' sort ascending points using Y. 'costFunction' sorts points using a cost function like x + costFunctionYWeight * y. (optional, default 'none')
• costFunctionYWeight number weight applied to Y in the sorting cost function if sorting='costFunction'. (optional, default 1)
• wrapperClassName string class name of the wrapper component. (optional, default '')
• charactersClassName string class name of the characters. It will be applied to all the characters. (optional, default '')
• untidyOnHover boolean reverses the behaviour. The text is tidy by default and gets untidy when hover (optional, default false)
• vertical boolean when true, the tidied text renders in vertical. (optional, default false)

Returns any renders the React component

AlphabetSoupWithDimensions

This component renders and animates the text as an Alphabet Soup Same props as AlphabetSoup without width and height which are calculated automatically

Parameters

• props Props

Returns any renders the React component

createStyles

Generates the styles for the wrapper and each of the text characters for the animation to happen.

Parameters

• text string text to be rendered. It is used to generate a style for each character.
• options object object with options (optional, default {})
  • options.fontSize string fontSize of the text when tidy (optional, default '20px')
  • options.lineHeight number lineHeight of the text when tidy. (optional, default 1.3)
  • options.fontFamily string fontFamily of the text. (optional, default 'Georgia')
  • options.transitionStyle string style of the transition animation. Values: 'constant' | 'progressive' | 'random'. (optional, default 'constant')
  • options.transitionSpeedMultiplier string speed multiplier for the transition. Default transitions take 1s. The multiplier can increase and decrease that. (optional, default 1)
  • options.untidyOnHover boolean when true the behaviour is the opposite. (optional, default false)
  • options.vertical boolean when true, the tidied text renders in vertical. (optional, default false)
  • options.charCenters Array<{x: number, y: number}> position of the characters before the user hovers them. (optional, default undefined)
• transitionTimingFunction string is the transition timing function used on CSS transition. e.g. ease, ease-in, cubic-bezier(1, 0.24, 0.25, 1), ... (optional, default 'ease')

Returns Function

getCenters

This is a function that calculates a set of points evenly distributed in a defined space. It uses the Lloyd's relaxation on a Voronoi diagram to distribute the points.

Parameters

• numberOfCenters number the number of points that need to be distributed in the space.
• options object object with options (optional, default {})
  • options.width number height of the space (optional, default 100)
  • options.height number height of the space (optional, default 100)
  • options.maxIterations number maximum number of iterations that the Lloyd's relaxation will run through. More iterations mean a more optimal solution, however it can take a lot more time. Less iteration generate less optimal solutions. (optional, default 20)
  • options.acceptableError number error that if achieved between iterations the relaxation process will stop, even if the iterations are not completed. Bigger error with compute results faster. (optional, default 1e-6)
  • options.sorting string sorting applied to the generated points. 'none' no sorting applied. 'sortByX' sort ascending points using X. 'sortByY' sort ascending points using Y. 'costFunction' sorts points using a cost function like x + costFunctionYWeight * y. (optional, default 'none')
  • options.costFunctionYWeight number weight applied to Y in the sorting cost function if sorting='costFunction'. (optional, default 1)

Returns Promise<Array<{x: number, y: number}>> returns a Promise that when resolved returns an array with the points positions

getCharHorizontalPos

This function return the CSS left parameter for the characters of the input index. Currently the makes the text to be centered on the space.

Parameters

• index number index of the characters to calculate the CSS left parameter
• totalWidth number total width of the text to render
• partialWidths Array<number> array with the width of each character sorted by index position.

getCharVerticalPos

This function return the CSS top and left parameter for the characters of the input index. Currently the makes the text to be centered on the space.

Parameters

• index number index of the characters
• totalHeight number total height of the text to render
• partialHeights Array<number> array with the width of each character sorted by index position.
• partialWidths Array<number>

measureText

Measures the widths and the height of a text

Parameters

• text (string | Array<string>) text to be measured or array with multiple lines of text.
• options object object with options (optional, default {})
  • options.fontSize string fontSize of the text. (optional, default '20px')
  • options.lineHeight number lineHeight of the text. (optional, default 1.3)
  • options.fontFamily string fontFamily of the text. (optional, default 'Georgia')
  • options.fontWeight string fontWeight of the text. (optional, default 400)
  • options.fontStyle string fontStyle of the text. (optional, default 'normal')
  • options.canvas string canvas used to render the text to measure. If none provided, one us created and used. (optional, default createdbydefault)

Returns {text: string, width: {value: number, units: string}, height: string} returns an object with the width, height and the text or longest text in case of multiline.

License

MIT © Origen Studio

Contribute

Package generated using Nod

Features

• Babel - Write next generation JavaScript today.
• Jest - JavaScript testing framework used by Facebook.
• ESLint - Make sure you are writing a quality code.
• Prettier - Enforces a consistent style by parsing your code and re-printing it.
• Flow - A static type checker for JavaScript used heavily within Facebook.
• Travis CI - Automate tests and linting for every push or pull request.
• Documentation - A documentation system so good, you'll actually write documentation.
• Conventional Changelog - Generate a changelog from git metadata.

Commands

$ yarn test # run tests with Jest
$ yarn run coverage # run tests with coverage and open it on browser
$ yarn run lint # lint code
$ yarn run docs # generate docs
$ yarn run build # generate docs and transpile code

Publish

$ yarn run version patch|minor|major
$ yarn publish

It'll automatically run test, lint, docs, build, generate CHANGELOG.md, and push commits and tags to the remote repository.