import{ReactTyped}from"react-typed";constMyComponent=()=>(<div><ReactTypedstrings={["Here you can find anything"]}typeSpeed={40}/><br/><ReactTypedstrings={["Search for products","Search for categories","Search for brands",]}typeSpeed={40}backSpeed={50}attr="placeholder"loop><inputtype="text"/></ReactTyped></div>);
Using typed start, stop, toggle, destroy, reset functions
import{ReactTyped,Typed}from"react-typed";constMyComponent{const[typed,setTyped]=React.useState<Typed|undefined>()return(<div><ButtononClick={typed.start()}>Start</Button><ButtononClick={typed.stop()}>Stop</Button><ButtononClick={typed.toggle()}>Toggle</Button><ButtononClick={typed.destroy()}>Destroy</Button><ButtononClick={typed.reset()}>Reset</Button><ReactTypedtypedRef={setTyped}strings={["Here you can find anything"]}typeSpeed={40}/></div>)}
Start only if is visible in the dom
import{ReactTyped}from"react-typed";constMyComponent=()=>(<ReactTypedstartWhenVisiblestrings={["If <strong>startWhenVisible</strong> is <strong>true</strong>, will start when is visible in the dom",]}typeSpeed={40}/>);
Using parseRef for custom components
import{ReactTyped}from"react-typed";import{Input}from"antd";constMyComponent=()=>(<ReactTypedparseRef={(ref)=>ref.current.input}attr="placeholder"strings={["Add a name here"]}typeSpeed={40}><Input></ReactTyped>
);
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.