animated-searchbar

Code Demo

Create a searchbar that talks back to the user

Code Demo

A ReactJS component which takes all the default input variables of an HTML DOM Input and an additional array of string variables to type out to the user>

Animated Searchbar

Code Demo

 
const worklist = ['Enter your dream location', 'Why not...Tokyo?', 'Melbourne?', 'Sydney?'];
<Searchbar
name={'WhereToGo'}
className={Style.input}
ONLYSHOWONFOCUS={true}
blinker={true}
minLength={1}
maxLength={10}
typeList={worklist}
typeDelay={3000}
typeSpeed={{min:50, max:200}}
 
onClick={(e)=>{
  console.log('onClick');
}}
onHover={(e)=>{
  console.log('onHover');
}}
onFocus={(e)=>{
 
}}
onBlur={(e)=>{
 
}}
/>
 

Download & Installation

$ npm i animated-searchbar

Authors or Acknowledgments

• James Edward Burdge

License

This project is licensed under the MIT License