At NearForm, our front end developers saw a problem whereby everyday browser events were polluting the core functionality of components. It forced us to use Classes to manage state, registering and deregistering events using lifecycle methods, not to mention catering for browser compatibility. It was a case of re-inventing the wheel every time we wanted to use a core browser event and related functions.
Custom hooks made it possible to create a neat and tidy re-usable library called React Browser Hooks that puts all code related to specific browser functionalty into modular custom hooks.
With one line of code you can now import functionality would previously have polluted a component with sometimes 50 or more extra lines of code, not to mention the time saved looking up Stack Overflow and catering for edge cases, multiple browsers etc.
We want you to use our browser hooks library to create something interesting. Be creative, make it fun and use as many hooks as you like.
Please visit our component storybook to see examples of each hook in action and read the documentation.
You can read more about React Browser Hooks in this blog post
Also, for some inspiration, check out this nifty demo by @donovanh on codepen using a selection of the hooks in this library
❤️
Follow these 3 simple steps:
Forkfrom this repositoryCloneyour fork, and type ‘npm install' and then 'npm start' to make sure it works locally. You should see the app running with a button that uses the fullScreen hook. Try that out.Importas many of the hooks as you like into your App and start coding!
When done, simply make a pull request back to the nearform repo tagging @cianfoley-nearform we will evaluate ASAP.
Here is a rough guide in terms of what we are looking for:
- It must work for us using ‘npm start’, as per the sample!
- The best use of our browser hooks
- Use of standard React hooks / your own custom hooks, we don't want to see Classes
- Best suggestions for other browser hooks not included in our library and your feedback (please add this in the comments section of your PR)
- Great code! 👍
The prize for the winner is a 3-day Ticket to NodeConfEU 2019 in Kilkenny, Ireland to the value of €799.
Best of luck 🍀
- The competition is open to React Amsterdam 2019 registered delegates/attendees
- Entries should be submitted between 14.00 CET Wednesday 10th April to 14.00 CET Friday 12th April 2019
- Entries will be judged by a panel appointed by Nearform and the winning entry will be selected at the panel’s sole discretion. It will not be possible to give individual feedback on all entries. The panel’s decision will be final.
- All entries must be made available under an approved OSI license
- The prize includes an attendance ticket for NodeConfEU 2019; flights and accommodation are not included
- The prize may not be exchanged for cash; it may be transferred on notice to Nearform and may not be offered for sale
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent