You have an array of people. Implement the Autocomplete component using Bulma Dropdown that will suggest people matching an entered text.
- suggestions should appear after some
delay
in typing (debounce
); - the
delay
should be customizable via props (default value is 300ms); - show the list of all people when input is focused but empty (Check this to see how it can work)
- show
No matching suggestions
message if there are no people containing the entered text; - don't run filtering again if the text has not changed (a pause in typing happened when the text was the same as before)
- save selected suggestion text to the input on click and close the list;
- pass the selected person to the
onSelected
callback passed via props; - add an
h1
to theApp
showingName (born - died)
of the selected person orNo selected person
. - when the selected person is displayed in the title, but the value in the input changes, the selected person should be cleared and
No selected person
should be shown.
- Install Prettier Extention and use this VSCode settings to enable format on save.
- Implement a solution following the React task guideline.
- Use the React TypeScript cheat sheet.
- Replace
<your_account>
with your Github username in the DEMO LINK and add it to the PR description. - Don't remove the
data-qa
attributes. It is required for tests.
If you have got an error during npm install
like this (when it tries to install node-sass
):
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Solutions:
- Install
sass
library instead ofnode-sass
:
npm uninstall node-sass
npm install sass --save-dev
An alternative solution is to install node-sass@npm:sass
version:
npm install node-sass@npm:sass --save-dev
react_autocomplete's People
Forkers
ysrckr nurdanokcu lun4trick ioghistudio umizdemud halynarydasova grslckr kavster92 vadivel-babu dahimohamed lukacsja grayfox147 rijo-j sercansimsek mmahfuzi ctk12 dynamizx iksich peti51 nikolaymelni romeoks ryshon mykola-hadupiak evgenynikitinevgeny mykolabutylkov samirmamedov1010 irina-kulish kocha1991 volodymir-tymtsias vaskovics yuran007 nazarkharkevych zynkro ihorchaikovskyi ihorivna007 vasyl-pavlenko nikoramo zykhor-andrii oleksii-mishchenko nastychenko petrovskyi-yevhen nikanika12 anton-chornobai oleksiy-uchaev ihor-zakharov yelyzavetamolochynska katyazaremska ivxvi ivanfront-end panyaprimal oleksandr-plias aleksandrtsivilin bogdanparubchenk01 andriy-litkovets irynabalandiukh annholovko cephy77 vladyslav-lapshyn niayaro julshvets serentinos ivankhrsh bohdan-mykhailenko vladyslavkucher skinnyjazz kirilshorin maryanmats mykola-maik olehmahera yemyr maksym-nemera growingananas vitvadym thienlaoo panch1811 vladimirshub grechana yuliya1907 ssviatt dimoshen pavlo-petrashevskyi rodionsav victor-buldenko allagutsul27 vo7kov annperetiatko yura-enttsel ollavka sasdaiv devwizhub danulyk05 ggsmou andrij-nalyvayko adv555 artemkravcov85 skrudj volodymyrpst ilona-borkovska cebanoleksandr pos1blRecommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.