reFLEXible 🐈

REsponsible and FLEXible string, which automatically shifts to the best for the task.



DEMO

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.

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.

2. 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