1.0.0 • Published 6 years ago
react-reflexible v1.0.0
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.
- Reflexible - automatic string selection. Content inside
Try
might not be displayed if there is no width for it.
import {Reflexible, Try} from 'react-reflexible';
<Reflexible><Try>Please</Try> Star <Try>⭐️ </Try>Reflexible</Reflexible>
// will print "Please Star⭐ Reflexible" or "Please Star Reflexible" or ""Star Reflexible"
<Reflexible><Try>⚛️</Try>React</Reflexible>
// will print "⚛ React" or "React"
Reflexible is a good fit for simples cases. It will print all content, or content without Try.
- FlexiblePick - picks the best match from the list
<FlexiblePick
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
1.0.0
6 years ago