{"id":27268801,"url":"https://github.com/shevchenkool/react-event-listener","last_synced_at":"2026-05-11T05:36:57.724Z","repository":{"id":246244284,"uuid":"820493767","full_name":"ShevchenkoOl/react-event-listener","owner":"ShevchenkoOl","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-23T19:47:44.000Z","size":9369,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-24T19:43:25.919Z","etag":null,"topics":["html-css-javascript","lazy-loading","netlify","react","react-icons","react-router","react-spinners","suspense","usestate"],"latest_commit_sha":null,"homepage":"https://shevchenkool.github.io/react-event-listener/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShevchenkoOl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-26T15:19:50.000Z","updated_at":"2024-07-23T19:47:07.000Z","dependencies_parsed_at":"2024-07-23T19:23:13.681Z","dependency_job_id":null,"html_url":"https://github.com/ShevchenkoOl/react-event-listener","commit_stats":null,"previous_names":["shevchenkool/react-event-listener"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Freact-event-listener","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Freact-event-listener/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Freact-event-listener/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShevchenkoOl%2Freact-event-listener/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShevchenkoOl","download_url":"https://codeload.github.com/ShevchenkoOl/react-event-listener/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248384149,"owners_count":21094678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html-css-javascript","lazy-loading","netlify","react","react-icons","react-router","react-spinners","suspense","usestate"],"created_at":"2025-04-11T11:32:44.885Z","updated_at":"2026-05-11T05:36:52.689Z","avatar_url":"https://github.com/ShevchenkoOl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Event Listener\nThis project was created for the purpose of practicing using Hooks (```useState```, ```useEffect```, ```useRef```, ```useMemo```). It was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), uses routing [React Router](https://reactrouter.com/en/main), uses \"lazy loading\"\n```Suspense``` and ```React.lazy```and has been added the spinner from the [React Spinners](https://mhnpd.github.io/react-loader-spinner/) library.\n\n### The project created to practice using an event listener in framework React:\n* Two identical counters, the first uses functional components (hooks - used to control state), the second using a class component (the old method);\n* Feedback is a functional component that has three buttons: Good, Neutral and Bad. After the user leaves rating, a statistics component appears at the bottom that counts the number of reviews left by category, the total and the percentage of positive reviews left;\n* The phone book is a functional component that has two fields for entering a name and phone number; after entering this data, a list of added contacts is created below, which we can delete, view details (a modal window opens) or find the contact we need by name. This project uses the [nanoid](https://www.npmjs.com/package/nanoid) library, which creates an id for each contact and [notiflix](https://notiflix.github.io/notify);\n* Background light switch, with two ```Start``` and ```Stop``` buttons. The hooks used are: useEffect, useRef, useState and a random color function;\n* The list of posts consists of two input fields (name and body of the post), after adding a post, a list of added posts is created below? which can be edited with the ```Delete``` button;\n* Book list is a functional component that has two fields for entering the name and author of the book (they open as a modal window when you click the ```Create book list``` button); after entering this data, a list of added books is created below, which we can sort (by title or author) or delete. The project uses hooks: useState, useMemo, and also created its own hooks for code readability.\n\n## How to Use the Repository\n\n1. Clone the repository: `https://github.com/ShevchenkoOl/react-event-listener.git`\n\n2. use ```npm install``` command to install package dependencies\n\n3. Navigate to the relevant section to explore the corresponding material.\n\n4. Open files and study the provided code examples.\n\n## Author\nThis repository was created and maintained by [Oleksii Shevchenko](https://shevchenkool.github.io/portfolio/). Questions, suggestions and feedback can be directed to [email](uzlabini@gmail.com) or [linkedin profile](linkedin.com/in/oleksii-shevchenko-535ab61b8).\nIf you have any questions or suggestions, feel free to create an issue or submit a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshevchenkool%2Freact-event-listener","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshevchenkool%2Freact-event-listener","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshevchenkool%2Freact-event-listener/lists"}