React String

React String allows you to render each character of a string separately.

See it in action here.

Installation

npm install react-string

or

yarn add react-string

How it works

In this example, the characters of a string will be rendered alternatively blue and red.

import React from 'react';
import String from 'react-string';

export default () => (
  <String
    renderChar={(character, index) => (
      <span style={{ color: index % 2 ? 'red' : 'blue' }}>{character}</span>
    )}
  >
    Hello world.
  </String>
);