fluid-resize-react
Provide a simple way to scale props to fill a container using binary search. Useful for scaling text sizes to fit a container.
Components
- FixedWidth: Scale down to fit container width
- FixedHeight: Scale down to fit container height
- FixedSize: Scale down to fit container width and height
Install
npm install --save fluid-resize-react
Usage
{ const renderer = <span => Lorem ipsum dolor sit amet sed adipiscitur sit adipiscitur a very big heading that im writing </span> ; const style = overflow: "hidden" outline: "1px solid red" whiteSpace: "nowrap" ; return <div ="App"> <FixedSize => renderer </FixedSize> <FixedHeight =>renderer</FixedHeight> <FixedWidth =>renderer</FixedWidth> <FixedWidth =>renderer</FixedWidth> <FixedWidth =>renderer</FixedWidth> </div> ;}
Pass a render function to a component as child. The component will call the render function passing the current iteration size as parameter.
You can also provide max value, min value and max iterations as props:
{ const renderer = <span =>Test</span> ; const style = overflow: "hidden" whiteSpace: "nowrap" ; return <div ="App"> <FixedWidth = = = => renderer </FixedWidth> </div> ;}
This components can be used for text as well for any other usages:
{ const renderer = <div => Math </div> ; return <div ="App"> <FixedWidth = = = > renderer </FixedWidth> </div> ;}
License
MIT © giulioz