React-zider-ui NPM

react-zider-ui

reusable pro react components package

Installation

NPM

$ npm install react-zider-ui

YARN

$ yarn add react-zider-ui

using the component:

import React from 'react';
import InfiniteTypewriter from 'infinite-typewriter';

const App = () => {
  return (
    <div>
      <InfiniteTypewriter
        text="Hello, World!"
        headerLevel="h1"
        gradientType="linear"
        gradient={true}
        gradientColor1="#ff0000"
        gradientColor2="#00ff00"
        gradientColor3="#0000ff"
        gradientDirection="to right"
        cursor="|"
        typingDelay={100}
        eraseDelay={2000}
        loopDelay={1000}
        fontSize="2rem"
        fontStyle="italic"
        onComplete={() => console.log('Typing complete!')}
      />
    </div>
  );
};

export default App;

PROPS

PropName	Type	Default	Description
text	string	required	The text to be displayed in the typewriter effect.
headerLevel	string	'p'	The HTML header level for the text (e.g., 'h1', 'h2', 'h3', etc.).
gradientType	string	'linear'	The type of gradient to apply ('linear' or 'radial').
gradient	boolean	false	Whether to apply a gradient effect to the text.
gradientColor1	string	'#ff0000'	The first color in the gradient effect (in hexadecimal format).
gradientColor2	string	'#00ff00'	The second color in the gradient effect (in hexadecimal format).
gradientColor3	string	'#0000ff'	The third color in the gradient effect (in hexadecimal format).
gradientDirection	string	'to right'	The direction of the linear gradient effect.
cursor	string	`''`	The cursor style to be shown during typing.
typingDelay	number	100	The delay (in milliseconds) between each character being typed.
eraseDelay	number	2000	The delay (in milliseconds) before the text starts erasing after it's fully typed.
loopDelay	number	1000	The delay (in milliseconds) before the typewriter effect loops after erasing text.
fontSize	string	'1rem'	The font size of the text.
fontStyle	string	'normal'	The font style of the text.
onComplete	function	undefined	A callback function to be called when the typewriter effect completes a loop.

UPDATE

To update the component to the latest version, run:

NPM

$ npm update react-zider-ui

YARN

$ yarn add react-zider-ui

react components components animation header animated-text typing-animation Auto-typing gradient-text text-transition text-loop text-carousel react-text-transition

29 days ago

1 month ago

1 month ago

1 month ago