react-titles

React-titles is a collection of title animations made is SVG, React-motion and GSAP.

With React Titles you can bring your web articles to life. When the component mounts to DOM it starts an animation, and the animation reverses back when it unmounts. The texts props passed to Title components are auto-sized to fit the specified box size. A title component automatically removes itself from DOM when it was closed. See a demo

Usage

import React, {Component} from "react";
import Title from "react-titles/Title2";

class ReactTitle extends Component {
    render() {
        return (
            <Title size="400" text1="I LOVE" text2="REACT" open={true} />
        );
    }
};

Closing Title Components:

To see the animation reverses when closing a Title component, you should pass the state to the open prop rather than wrapping the entire component within a condition. The Title component will remove itself when the animation completes.

Wrong:

    <div className="container">
        {   this.state.isOpen &&
            <Title size="400" text1="SOME" text2="TITLE" />
        }
    </div>

Correct:

    <Title size="400" text1="SOME" text2="TITLE" open={this.state.isOpen} />

Instalation

npm install react-titles or yarn add react-titles

Component API

| Name | Type | Default | Description | | ------------- |:-------------:|:------------:|:----------------------------------------------------:| | size | string | 400 | The explosion size | | text1 | string | empty string | The main title | | text2 | string | empty string | The subtitle (Note: Title 1 and 7 have only one text)| | open | boolean | true | Show or hide the componenet | | fontFamily | string | empty string | The font-family applied to texts | | onComplete | func | function | Fires when animation completes |

License

react-titles is under the MIT license.