https://github.com/bigfanjs/react-titles

A collection of components helps animate your titles
https://github.com/bigfanjs/react-titles

Last synced: about 2 months ago
JSON representation

A collection of components helps animate your titles

• Host: GitHub
• URL: https://github.com/bigfanjs/react-titles
• Owner: bigfanjs
• License: mit
• Created: 2018-06-23T11:44:03.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-23T15:48:45.000Z (over 6 years ago)
• Last Synced: 2024-08-08T16:55:28.222Z (5 months ago)
• Language: JavaScript
• Size: 165 KB
• Stars: 38
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# 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](https://bigfanjs.github.io/react-titles-demo/)

# Usage

```js

import React, {Component} from "react";

import Title from "react-titles/Title2";

class ReactTitle extends Component {

    render() {

        return (

            

        );

    }

};

```

## 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:

```js

    


        {   this.state.isOpen &&

            

        }

    

```

### Correct:

```js

    

```


# 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.