Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-alphabet-soup
Advanced tools
Readme
Yes, react-instagram-feed
would be a better name but it was taken...
npm install --save react-alphabet-soup || yarn add react-alphabet-soup
//...
<AlphabetSoup text="AWESOME TEXT" fontSize="24px" sorting="costFunction" costFunctionYWeight={3} />
//...
This component renders and animates the text as an Alphabet Soup
props
Propstext
string text to renderwidth
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
This component renders and animates the text as an Alphabet Soup Same props as AlphabetSoup without width and height which are calculated automatically
props
PropsReturns any renders the React component
Generates the styles for the wrapper and each of the text characters for the animation to happen.
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
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.
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
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.
index
number index of the characters to calculate the CSS left
parametertotalWidth
number total width of the text to renderpartialWidths
Array<number> array with the width of each character sorted by index position.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.
index
number index of the characterstotalHeight
number total height of the text to renderpartialHeights
Array<number> array with the width of each character sorted by index position.partialWidths
Array<number>Measures the widths and the height of a text
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.
MIT © Origen Studio
Package generated using Nod
$ 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
$ 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.
FAQs
Create super cool text animations based on an alphabet soup concept
The npm package react-alphabet-soup receives a total of 0 weekly downloads. As such, react-alphabet-soup popularity was classified as not popular.
We found that react-alphabet-soup demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.