react-better-containers

Handsome containers for React.

Usage no npm install needed!

<script type="module">
  import reactBetterContainers from 'https://cdn.skypack.dev/react-better-containers';
</script>

README

React Better Containers

About

version license open issues activity contributors

More

repo size react version react version react version react version

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

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.

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