React-better-containers NPM

React Better Containers

About

React Better Containers contains miscellaneous React Components to write faster with better results.

Components

Text Components
- Text
- Spanner
Copyright

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

placeholder demo

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.