animated-searchbar

Animated Searchbar - ReactJS

Usage no npm install needed!

<script type="module">
  import animatedSearchbar from 'https://cdn.skypack.dev/animated-searchbar';
</script>

README

Animated Searchbar - ReactJS

Create a searchbar that talks back to the user

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