React-writing-effect NPM

React Writing Effect

A simple Reactjs component to make a typing effect

Installation

as simple as type a command on your project:

npm i react-writing-effect

Implementation

Here goes a simple example:

import Typing from 'react-writing-effect';

const App = () => {
  return (
    <div>
        <Typing>
            Simple typing effect component
        </Typing>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Documentation

React writing effect is a single component library, as you saw in the implementation example, it has no more mistery than that, if you'd like to customize it you're able to, using some props, those are:

Prop	Description	Type	Default	Aditional Information
typingSpeed	Defines the speed to type each letter	String	100	ms
cursorTimeLapse	Defines the time lapse the cursor uses to know how fast it needs to blink	String	1	seconds
className	A class to use in the whole component	String	undefined	N/A
style	Css styles to use in the whole component	React.CSSProperties	undefined	N/A
onFinish	A callback used at the end of current animation	Function	undefined	N/A
cursor	If you want to use a custom blinker you're able to using this prop	JSX.Element	undefined	N/A
styleText	Css styles to use just in the text of the component	React.CSSProperties	undefined	N/A
styleCursor	Css styles to use just in the cursor of the component	React.CSSProperties	undefined	N/A

Children prop

To pass the text to animate you have to pass it as a Children prop just like in the implementation example.

@types/styled-components styled-components

@infinitebrahmanuniverse/nolb-react-wr @everything-registry/sub-chunk-2624

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago