react-reflexible

Responsible component shift shaper!

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-reflexible
1.0.06 years ago6 years agoMinified + gzip package size for react-reflexible in KB

Readme

reFLEXible 🐈
REsponsible and FLEXible string, which automatically shifts to the best for the task.
The quick brown fox jumps over the lazy dog

Cat!
<img src="https://img.shields.io/npm/v/react-nyan-stroller.svg?style=flat-square" />


RE-sponsible and FLEX-ible string. Automatically picks string perfectly fitting available space, without any JS or media queries involved.
Based on overflower, Pure HTML, works in IE11+.
API
Reflexible exports 2 Components - Reflexible, FlexiblePick, which both use the same internal API.
  1. Reflexible - automatic string selection. Content inside Try might not be displayed
if there is no width for it. ```js import {Reflexible, Try} from 'react-reflexible';
Please Star ⭐️ Reflexible // will print "Please Star⭐ Reflexible" or "Please Star Reflexible" or ""Star Reflexible"
⚛️React // will print "⚛ React" or "React" ``` Reflexible is a good fit for simples cases. It will print all content, or content without Try.
  1. FlexiblePick - picks the best match from the list
```js try={[ "The quick brown fox jumps over the lazy dog", "The quick brown 🦊 jumps over the lazy 🐶", "The ⚡️ brown 🦊 ⬆️ over the 🐢 🐶", "⚡️ 🦊 ⬆️ 🐢 🐶", ]}/> ```
Probably you need FlexiblePick
Licence
MIT