react-chatgpt-typewriter
v1.0.5
Published
Animate your texts with a typing effect inspired by ChatGPT.
Downloads
11
Maintainers
Readme
react-chatgpt-typewriter
Animate your texts with a typing effect inspired by ChatGPT.
Installation
npm i react-chatgpt-typewriter
React
Declaration
export type CursorProps = {
fill?: string;
width?: string;
height?: string;
marginLeft?: string;
};
export type ChatGPTTypewriterEffectProps = {
text: string;
delay?: number;
cursor?: CursorProps;
hideWhenFinished?: boolean;
onChange?: (text: string) => void;
onFinished?: () => void;
};
declare const ChatGPTTypewriterEffect: React.FC<ChatGPTTypewriterEffectProps>;
export default ChatGPTTypewriterEffect;
Usages
App.css
-------
.App {
font-size: 3rem;
}
App.tsx
-------
import './App.css';
import ChatGPTTypewriterEffect from 'react-chatgpt-typewriter';
function App() {
return (
<div className="App">
<ChatGPTTypewriterEffect
delay={50}
cursor={{
width: '2em',
height: '3em',
marginLeft: '1em',
}}
onFinished={() => {
console.log('Text writed');
}}
text="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis corporis magnam esse? At asperiores molestias fugit mollitia vero adipisci debitis?"
/>
</div>
);
}
export default App;