1.0.0 • Published 2 years ago
react-text-morph v1.0.0
ReactTextMorph
Morph Between text in React.
Installation
First make sure you have npm and node installed. Run npm install react-text-morph
to install the package.
Usage
After installing the package, you can import it in your project.
import ReactTextMorph from 'react-text-morph';
Then you can use it in your project and pass in the props you want.
import { Component } from 'react';
class Example extends Component {
constructor() {
super();
this.state = {
morphState: false
};
}
render() {
return (
<ReactTextMorph
text="Hello World"
morphText="Morped Text!!!"
morphTextColor="green"
morphState={this.state.morphState}
onMouseOver={
() => this.setState({
morphState: true
})
}
onMouseOut={
() => this.setState({
morphState: false
})
}
/>
);
}
}
Props
text: String (required, Ex: "Hello World")
The text that will be displayed while not morphed.
morphText: String (required, Ex: "Morped Text!!!")
The text that will be displayed after morphing.
morphTextColor: CSSString (Default: white, Ex: "#rgba(120, 0, 40, 0.5)")
The color of the text after morphing.
morphState: Boolean (Default, false, Ex: true)
The state of the text. If true, the text will be morphed.
...rest: Object (Default: null, Ex: {className: 'map'})
Other props that are passed to the underlying Element.
Building
You can manually build ReactTextMorph by following the instructions below:
- Make sure you have npm and node installed.
- Clone the repository to your local machine
git clone https://github.com/nekumelon/ReactTextMorph.git
- Cd into the cloned directory
cd ReactTextMorph
and runnpm install
- Run
npm build
to build the module.
LICENSE
See LICENSE for the license.
1.0.0
2 years ago