├── .editorconfig ├── CODE_OF_CONDUCT.md ├── LICENSE.md ├── README.md └── contributing.md /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender, level of experience, nationality, 9 | personal appearance, race and religion. 10 | 11 | ## Our Standards 12 | 13 | Examples of behavior that contributes to creating a positive environment 14 | include: 15 | 16 | - Using welcoming language 17 | - Being respectful of differing viewpoints and experiences 18 | - Gracefully accepting constructive criticism 19 | - Focusing on what is best for the community 20 | - Showing empathy towards other community members 21 | 22 | Examples of unacceptable behavior by participants include: 23 | 24 | - The use of sexualized language or imagery and unwelcome sexual attention or 25 | advances 26 | - Trolling, insulting/derogatory comments, and personal or political attacks 27 | - Public or private harassment 28 | - Publishing others' private information, such as a physical or electronic 29 | address, without explicit permission 30 | - Other conduct which could reasonably be considered inappropriate in a 31 | professional setting 32 | 33 | ## Our Responsibilities 34 | 35 | Project maintainers are responsible for clarifying the standards of acceptable 36 | behavior and are expected to take appropriate and fair corrective action in 37 | response to any instances of unacceptable behavior. 38 | 39 | Project maintainers have the right and responsibility to remove, edit, or 40 | reject comments, commits, code, wiki edits, issues, and other contributions 41 | that are not aligned to this Code of Conduct, or to ban temporarily or 42 | permanently any contributor for other behaviors that they deem inappropriate, 43 | threatening, offensive, or harmful. 44 | 45 | ## Scope 46 | 47 | This Code of Conduct applies both within project spaces and in public spaces 48 | when an individual is representing the project or its community. Examples of 49 | representing a project or community include using an official project e-mail 50 | address, posting via an official social media account, or acting as an appointed 51 | representative at an online or offline event. Representation of a project may be 52 | further defined and clarified by project maintainers. 53 | 54 | ## Enforcement 55 | 56 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 57 | reported by contacting the project team at gfc714@gmail.com. All 58 | complaints will be reviewed and investigated and will result in a response that 59 | is deemed necessary and appropriate to the circumstances. The project team is 60 | obligated to maintain confidentiality with regard to the reporter of an incident. 61 | Further details of specific enforcement policies may be posted separately. 62 | 63 | Project maintainers who do not follow or enforce the Code of Conduct in good 64 | faith may face temporary or permanent repercussions as determined by other 65 | members of the project's leadership. 66 | 67 | ## Attribution 68 | 69 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 70 | available at [http://contributor-covenant.org/version/1/4][version] 71 | 72 | [homepage]: http://contributor-covenant.org 73 | [version]: http://contributor-covenant.org/version/1/4/ 74 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome React Hooks [![Awesome](https://awesome.re/badge-flat.svg)](https://awesome.re) 2 | 3 | [](https://reactjs.org/docs/hooks-intro.html) 4 | 5 | A curated list about React Hooks. 6 | 7 | > _Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class._ 8 | 9 | ## Contents 10 | 11 | - [Hooks](#hooks) 12 | - [Tutorials/Articles/Workshops](#tutorialsarticlesworkshops) 13 | - [Discussions](#discussions) 14 | - [Examples](#examples) 15 | - [Extensions/Libraries](#extensionslibraries) 16 | 17 | ## Hooks 18 | 19 | - [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html) 20 | - [Hooks at a Glance](https://reactjs.org/docs/hooks-overview.html) 21 | - [Using the State Hook](https://reactjs.org/docs/hooks-state.html) 22 | - [Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html) 23 | - [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) 24 | - [Building Your Own Hooks](https://reactjs.org/docs/hooks-custom.html) 25 | - [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html) 26 | - [Hooks FAQ](https://reactjs.org/docs/hooks-faq.html) 27 | 28 | ## Tutorials/Articles/Workshops 29 | 30 | - [React Today and Tomorrow and 90% Cleaner React](https://www.youtube.com/watch?v=dpw9EHDh2bM) - Dan Abramov and Sophie Alpert. 31 | - [Making Sense of React Hooks](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) - Dan Abramov. 32 | - [React Hooks and Suspense](https://egghead.io/playlists/react-hooks-and-suspense-650307f2) - Kent C. Dodds. 33 | - [React Hooks & testing: Stepping through React code](https://youtu.be/JQeB9miT9Wc) - Kent C. Dodds. 34 | - [My Thoughts on React Hooks](https://youtu.be/gmF4k6P2va8) - Ben Awad. 35 | - [Fetching Data from an API with React Hooks useEffect](https://youtu.be/k0WnY0Hqe5c) - Ben Awad. 36 | - [Are React Hooks Slower than Class Components?](https://youtu.be/tKRWuVOEB2w) - Ben Awad. 37 | - [Building a Todo List with React Hooks useState](https://youtu.be/cAZ-fOd1RpA) - Ben Awad. 38 | - [Using React Hooks vs. Class Components](https://youtu.be/vbaIZ3xMj9U) - Ben Awad. 39 | - [Using Immer with Reducers and React Hooks](https://youtu.be/FmKjwh34Rn8) - Ben Awad. 40 | - [React Hooks useContext](https://youtu.be/xWXxkFzgnFM) - Ben Awad. 41 | - [Everything you need to know about React Hooks](https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349) - Carl Vitullo. 42 | - [Hooks in react-spring, a tutorial](https://medium.com/@drcmda/hooks-in-react-spring-a-tutorial-c6c436ad7ee4) - Paul Henschel. 43 | - [React Hooks: Notes Taken](https://medium.com/@tomaskonrady/react-hooks-notes-taken-c42376af3ab0) - Tomáš Konrády. 44 | - [Getting Started with React Hooks](https://scotch.io/tutorials/getting-started-with-react-hooks) - Chris Sevilleja. 45 | - [React hooks: not magic, just arrays](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) - Rudi Yardley. 46 | - [Why React’s new Hooks API is a game changer](https://itnext.io/why-reacts-hooks-api-is-a-game-changer-8731c2b0a8c) - Rudi Yardley. 47 | - [Writing Custom React Hooks for GraphQL](https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62) - Nader Dabit. 48 | - [Manage global state with React Hooks](https://medium.com/@Charles_Stover/manage-global-state-with-react-hooks-6065041b55b4) - Charles Stover. 49 | - [React Hooks: Managing Web Sockets with useEffect and useState](https://medium.com/@rossbulat/react-hooks-managing-web-sockets-with-useeffect-and-usestate-2dfc30eeceec) - Ross Bulat. 50 | - [Primer on React Hooks](https://testdriven.io/blog/react-hooks-primer/) - Austin Johnston. 51 | - [React Hooks - A deeper dive featuring useContext and useReducer](https://testdriven.io/blog/react-hooks-advanced/) - Austin Johnston. 52 | - [Advanced React Hooks Workshop](https://github.com/kentcdodds/advanced-react-hooks) - Kent C. Dodds. 53 | 54 | ## Discussions 55 | 56 | - [v6 Candidate Preview: Use React Hooks for connect](https://github.com/reduxjs/react-redux/pull/1065) - Mark Erikson. 57 | - [RFC: React Hooks](https://github.com/reactjs/rfcs/pull/68) - Sebastian Markbåge. 58 | - [Using Hooks in React Native](https://github.com/facebook/react-native/issues/21967#issuecomment-434113687) - Héctor Ramos. 59 | 60 | ## Examples 61 | 62 | - [Color Match](https://codesandbox.io/s/jjy215l7w3) - Color Match Game. 63 | - [React Hooks counter](https://codesandbox.io/s/yjn90lzwrx?module=%2Fsrc%2FApp.js) - Counter using useState of React Hooks. 64 | - [Toggle component](https://codesandbox.io/s/m449vyk65x) - Toggle component made with React Hooks. 65 | - [Hooks test](https://github.com/jacobp100/hooks-test) - Somewhat complicated use case solved relatively nicely with React Hooks. 66 | - [React Hanger](https://github.com/kitze/react-hanger) - React Hanger example. 67 | - [React Navigation Hooks](https://github.com/react-navigation/react-navigation-hooks) - React hooks for convenient react-navigation use. 68 | - [Haunted](https://github.com/matthewp/haunted) - React's Hooks API implemented for web components. 69 | - [useHooks](https://usehooks.com/) - Easy to understand React Hook recipes by [Gabe Ragland](https://twitter.com/gabe_ragland). 70 | - [Collection of React Hooks](https://nikgraf.github.io/react-hooks/) - Collection of React Hooks. 71 | - [React Spring demo](https://codesandbox.io/s/ppxnl191zx) - Demo of how react-spring could use React Hooks as a new API. 72 | - [React Hooks](https://codesandbox.io/s/yq5qowzrvz) - React Hooks useState() and useEffect(). 73 | - [Hooks Todo App](https://codesandbox.io/s/9kwyzy0y4) - App made with React Hooks. 74 | - [react-thanos](https://github.com/codeshifu/react-thanos) - React hooks implementation of Google's Thanos easter egg. 75 | 76 | ## Extensions/Libraries 77 | 78 | - [redux-react-hook](https://github.com/facebookincubator/redux-react-hook) - React Hook for accessing state and dispatch from a Redux store. 79 | - [react-use](https://github.com/streamich/react-use) - Collection of essential React Hooks. 80 | - [The Platform](https://github.com/palmerhq/the-platform) - Browser API's turned into React Hooks and Suspense-friendly React elements for common situations. 81 | - [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) - This plugin enforce rule of hooks to avoid common mistakes. 82 | - [react-hooks-lib](https://github.com/beizhedenglong/react-hooks-lib) - A set of reusable React Hooks. 83 | - [use-immer](https://github.com/mweststrate/use-immer) - A hook to use immer as a React hook to manipulate state. 84 | - [react-hanger](https://github.com/kitze/react-hanger) - A small collection of useful hooks for React 16.7. 85 | - [react-firebase-hooks](https://github.com/csfrequency/react-firebase-hooks) - A set of reusable React Hooks for Firebase. 86 | - [react-intersection-visible-hook](https://github.com/AvraamMavridis/react-intersection-visible-hook) - React hook to track the visibility of a functional component based on IntersectionVisible Observer. 87 | - [use-timer](https://github.com/thibaultboursier/use-timer) - Simple React hook to handle timer. 88 | - [react-native-hooks](https://github.com/react-native-community/react-native-hooks) - React Native APIs turned into React Hooks for use in stateless React components. 89 | - [react-with-hooks](https://github.com/yesmeck/react-with-hooks) - Ponyfill for the proposed React Hooks API. 90 | - [react-hooks-screen-type](https://github.com/pankod/react-hooks-screen-type) - Determining screen size type for Bootstrap 4 grid. 91 | - [use-http](https://github.com/alex-cory/react-usefetch) - React hooks for making isomorphic HTTP requests. 92 | - [react-fetch-hook](https://github.com/ilyalesik/react-fetch-hook) - React hook for conveniently use Fetch API. 93 | - [storeon](https://github.com/storeon/storeon) - hook-based state manager in 173 bytes. 94 | - [react-hook-form](https://github.com/bluebill1049/react-hook-form) - Performance, flexible and extensible forms with easy to use for validation. 95 | 96 | ## License 97 | 98 | Awesome React hooks is [CC0 licensed](/LICENSE.md). 99 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | Please note that this project is released with a [Contributor Code of Conduct](CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms. 4 | 5 | --- 6 | 7 | Ensure your pull request adheres to the following guidelines: 8 | 9 | - **If you just created something, wait at least 30 days before submitting.** This is to give it some time to mature and ensure it's not just a publish-and-forget type of project. 10 | - Only submit something unique and useful. If you submitting a article be sure that you've read it before and that it is a interesting article. 11 | - Search previous suggestions before making a new one to avoid duplicate links. 12 | - Make an individual pull request for each suggestion. 13 | - Be sure to use [awesome-lint](https://github.com/sindresorhus/awesome-lint) before make a pull request. 14 | - Don't use emojis on titles or descriptions. 15 | - Use the following format for **Tutorials/Articles/Workshops** and **Discussions**: `[The complete title](link) - Authors.` 16 | - **Examples** is a section reserved for projects that give us tips about how apply React Hooks. 17 | - Use the following format for **Examples**: `[Title](link) - A short description.` 18 | - Use the following format for **Extensions/Libraries**: `[The extension's or library's name (in the same font case as it is on the repository)](link) - Description.` 19 | - Additions should be added to the bottom of the relevant category and after the last item of the category. 20 | - Keep descriptions short and simple, but descriptive. 21 | - Start the description with a capital. 22 | - Don't start the description with `A` or `An`. 23 | - Make sure your text editor is set to remove trailing whitespace. 24 | - New categories or improvements to the existing categorization are welcome, but should be done in a separate pull request. 25 | 26 | Thank you for your suggestion! 27 | 28 | ### Updating your PR 29 | 30 | A lot of times, making a PR adhere to the standards above can be difficult. If the maintainers notice anything that we'd like changed, we'll ask you to edit your PR before we merge it. If you're not sure how to do that, [here is a guide](https://github.com/RichardLitt/knowledge/blob/master/github/amending-a-commit-guide.md) on the different ways you can update your PR so that we can merge it. 31 | --------------------------------------------------------------------------------