React component to create customizable letterings
MIT License
React component to create customizable letterings.
import Lettering from './lettering'
<Lettering className="fancyText" tagName="h1" charClass="custom">
Awesome Title!
</Lettering>
You just need to pass a className
that will be used in the wrapper and you can also pass custom classes for chars, words and lines. For instance, in the case above, the generated code will be:
<h1 class="fancyText">
<span class="word word-0">
<span class="custom custom-0">A</span>
<span class="custom custom-1">w</span>
<span class="custom custom-2">e</span>
<span class="custom custom-3">s</span>
<span class="custom custom-4">o</span>
<span class="custom custom-5">m</span>
<span class="custom custom-6">e</span>
<span class="custom custom-7"></span>
</span>
<span class="word word-1">
<span class="custom custom-8">T</span>
<span class="custom custom-9">i</span>
<span class="custom custom-10">t</span>
<span class="custom custom-11">l</span>
<span class="custom custom-12">e</span>
<span class="custom custom-13">!</span>
</span>
</h2>
And with some styles the result can be: