README
React Better Containers
About
More
About
React Better Containers contains miscellaneous React Components to write faster with better results.
Components
Text Components
Text
Text wraps some textual data and allows more control over it.
<Text>My text.</Text>
Now with all parameters:
<Text
tag='p'
textPlaceholder='lines'
textPlaceholderOptions={{
color: '#eaeaea',
linesHeight: 0.4
}}
forcePlaceholder={false}
>My text.</Text>
ℹ️ If a ref is passed as an argument, it will automatically be applied to the rendered element. Both static and functional ref works.
Props
ℹ️ No parameters are required.
name | default | description |
---|---|---|
tag | 'p' | Render the component with a custom tag. Every HTML component is supported. |
textPlaceholder | 'lines' | Determine the placeholder to render when text font isn't fully loaded. (1) |
textPlaceholderOptions | - | Control the behavior of the placeholder. |
textPlaceholderOptions.color | inherit | Color to render the placeholder effect. |
textPlaceholderOptions.linesHeight | 0.4 | Height in em of the replacement line. Only has effect with placeholder set to 'lines'. |
forcePlaceholder | false | Force placeholder to render while set to true. |
(1) Possible values are 'lines', 'blurry' and 'none'. Null or undefined is equivalent to 'lines'.
Spanner
Wraps each character of descendant textNodes in a custom span.
<Spanner>
<div>A Text Node.</div>
Some more text.
</Spanner>
This will result in the following rendered HTML:
<div>
<span class="spanned">A</span>
<span class="spanned"> </span>
<span class="spanned">T</span>
<span class="spanned">e</span>
<span class="spanned">x</span>
<span class="spanned">t</span>
<span class="spanned"> </span>
<span class="spanned">N</span>
<span class="spanned">o</span>
<span class="spanned">d</span>
<span class="spanned">e</span>
<span class="spanned">.</span>
</div>
<span class="spanned">S</span>
<span class="spanned">o</span>
<span class="spanned">m</span>
<span class="spanned">e</span>
<!-- etc. -->
It can be useful for some dynamic and quick manipulation.
Props
ℹ️ No parameters are required.
name | default | description |
---|---|---|
ignore | - | Defines an Array of characters to ignore. |
spannerClass | 'spanned' | A custom className to use for the spans. |
Copyright
2020 Kushuh - MIT license