react-alphabet-soup
Yes, react-instagram-feed
would be a better name but it was taken...
Quick start
- Install
npm install --save react-alphabet-soup || yarn add react-alphabet-soup
- Use the component
//...
<AlphabetSoup text="AWESOME TEXT" fontSize="24px" sorting="costFunction" costFunctionYWeight={3} />
//...
API
Table of Contents
- AlphabetSoup
- AlphabetSoupWithDimensions
- createStyles
- getCenters
- getCharHorizontalPos
- getCharVerticalPos
- measureText
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, default100
) -
height
number height of the space in pixels (optional, default100
) -
fontSize
string fontSize of the text when tidy. (optional, default'20px'
) -
lineHeight
number lineHeight of the text when tidy. (optional, default1.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, default1
) -
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, default20
) -
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, default1e-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 likex + costFunctionYWeight * y
. (optional, default'none'
) -
costFunctionYWeight
number weight applied to Y in the sorting cost function if sorting='costFunction'. (optional, default1
) -
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, defaultfalse
) -
vertical
boolean when true, the tidied text renders in vertical. (optional, defaultfalse
)
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, default1.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, default1
) -
options.untidyOnHover
boolean when true the behaviour is the opposite. (optional, defaultfalse
) -
options.vertical
boolean when true, the tidied text renders in vertical. (optional, defaultfalse
) -
options.charCenters
Array<{x: number, y: number}> position of the characters before the user hovers them. (optional, defaultundefined
)
-
-
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, default100
) -
options.height
number height of the space (optional, default100
) -
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, default20
) -
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, default1e-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 likex + costFunctionYWeight * y
. (optional, default'none'
) -
options.costFunctionYWeight
number weight applied to Y in the sorting cost function if sorting='costFunction'. (optional, default1
)
-
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 CSSleft
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, default1.3
) -
options.fontFamily
string fontFamily of the text. (optional, default'Georgia'
) -
options.fontWeight
string fontWeight of the text. (optional, default400
) -
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, defaultcreatedbydefault
)
-
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.