Occamy is choranaptyxic, meaning it will grow or shrink to fit available space
-- Fantastic Beasts and Where to Find Them
React component for automatically sized text that fits in its parent.
Live demo: splact.github.io/react-occamy-text
To build the examples locally, run:
npm install
npm start
Then open localhost:8000
in a browser.
The easiest way to use react-occamy-text is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).
You can also use the standalone build by including dist/react-occamy-text.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install react-occamy-text --save
Import it into your react project.
import OccamyText from 'react-occamy-text';
Render it passing text as children .
<OccamyText>Lorem ipsum dolor sit amet</OccamyText>
It should not be used inside auto-sized (eg. height: auto
) elements.
- children – the text that need to be resized
- grow – true if the text can scale up its original size (default
true
) - maxFontSize – maximum font size in pixels (default
96
) - maxFontSizeVariation – maximum font size variation per iteration (default
8
) - maxHeight – maximum height (default
undefined
, parent height will be used instead) - minFontSize – minimum font size in pixels (default
4
) - minFontSizeVariation – minimum font size variation per iteration (default
0.3
) - shrink – true if the text can scale down its original size (default
true
)
OccamyText is rendered as a div
with occamy-text
class and height: 100%
style defined inline to make it fits in its parent.
The output text will not always perfectly fit the parent height, in some cases a subtile tollerance is accepted, giving always the larger text that doesn't exceed its parent.
NOTE: The source code for the component is in src
. A transpiled CommonJS version (generated with Babel) is available in lib
for use with node.js, browserify and webpack. A UMD bundle is also built to dist
, which can be included without the need for any build system.
To build, watch and serve the examples (which will also watch the component source), run npm start
. If you just want to watch changes to src
and rebuild lib
, run npm run watch
(this is useful if you are working with npm link
).
MIT