Neglected Parking Meter

    @moxy/react-split-text

    1.0.1 • Public • Published

    react-split-text

    NPM version Downloads Build Status Coverage Status Dependency status Dev Dependency status

    A react component that wraps each word of a sentence into a <span> element.

    Installation

    $ npm install @moxy/react-split-text

    This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.

    Motivation

    Sometimes there's a need to split a sentence into multiple elements, either to individually animate or simply style them. The SplitText component receives a string and splits it (with a separator of your choice) into multiple <span>s.

    Usage

    import React from 'react';
    import SplitText from '@moxy/react-split-text';
    
    const MyPage = (props) => (
        <div className="container">
            <SplitText className="word">Lorem ipsum dolor sit amet.</SplitText>
        </div>
    );
    
    export default MyPage;

    Import the stylesheet in the project's entry JavaScript file:

    import '@moxy/react-split-text/dist/index.css';

    API

    Besides the following supported props by the SplitText component, additional props are spread to each child.

    children

    Type: string | Required: true

    Text to be split and rendered inside the component.

    className

    Type: string | Required: false

    A className to apply to each child.

    separator

    Type: string | Required: false | Default: non-breaking space

    The pattern describing where each split should occur, just like the one from String.prototype.split().

    Tests

    $ npm test
    $ npm test -- --watch # during development

    Demo

    A demo Next.js project is available in the /demo folder so you can try out this component.

    First, build the react-split-text project with:

    $ npm run build

    To run the demo, do the following inside the demo's folder:

    $ npm i
    $ npm run dev

    Note: Everytime a change is made to the package a rebuild is required to reflect those changes on the demo.

    FAQ

    I can't override the component's CSS, what's happening?

    There is an ongoing next.js issue about the loading order of modules and global CSS in development mode. This has been fixed in v9.3.6-canary.0, so you can either update next.js to a version higher than v9.3.5, or simply increase the CSS specificity when overriding component's classes, as we did in the demo, e.g. having the page or section CSS wrap the component's one.

    License

    Released under the MIT License.

    Install

    npm i @moxy/react-split-text

    DownloadsWeekly Downloads

    73

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    10.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • tiagodinis
    • moxyhq
    • filipediasf
    • satazor
    • marcooliveira
    • acostalima
    • andregoncalvesdev