npm.io
1.1.1 • Published 7 years ago

react-word-splitter

Licence
MIT
Version
1.1.1
Deps
11
Size
15 kB
Vulns
6
Weekly
0

React-Word-Splitter

This module is React/Next Component, which makes words splitted by word or char with span tag and specific attribute.

Installation

This module is available as an npm package.

// with npm
npm install react-word-splitter

// with yarn
yarn add react-word-splitter

Usage

Here is a quick example to get you started, it's all you need:

import React from "react";

import Splitter from "react-word-splitter";

export default function(){
    return(
        <Splitter
            rule="chars"
            eachClass="testClass"
            eachIdWithIndex="testID"
            indexOption="number"
            words="あいうえお"
        /> // <span class='testClass' id='testID__1'>あ</span><span class='testClass' id='testID__2'>い</span><span class='testClass' id='testID__3'>う</span><span class='testClass' id='testID__4'>え</span><span class='testClass' id='testID__5'>お</span>
    )
}

If you want to know in detail, Please check API set below.

API

Property type detail
rule "words" | "chars" set split option
eachClass string set common class each element has
eachIdWithIndex string set ID each element has with Index
indexOption "number" | string[] set option about index
words string words which you want to split

Keywords