donavon/hook-flow

Stars
2,157
Rank 21,378 (Top 0.5 %)
Language
Shell
License
MIT License
Created almost 6 years ago
Updated about 2 years ago

donavon/hook-flow

donavon

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

A flowchart that explains the new lifecycle of a Hooks component. https://dwe.st/hf

hook-flow

React Hooks were introduced in version 16.8.0. They are a complete departure from class component lifecycle events. For more information, see the official React Hooks API Reference.

Here is a flow diagram that explains the new flow of a Hooks component.

Flow Diagram

This flow diagram is also available as a PDF file.

Open in browser

To quickly open the Hook Flow Diagram in your default browser, you can execute the following from your terminal. Commit this to memory! 😉

$ npx hook-flow

License

MIT Licensed

Contributors

Thanks goes to these wonderful people (emoji key):

_{Donavon West} 🤔 🚇 🚧 👀 💻 🎨	_{Revel Carlberg West} 🤔 🎨	_{Dan Abramov} 🤔 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!

use-persisted-state

A custom React Hook that provides a multi-instance, multi-tab/browser shared and persistent state.

use-dark-mode

A custom React Hook to help you implement a "dark mode" component.

use-event-listener

A custom React Hook that provides a declarative useEventListener

thwack

A tiny modern data fetching solution

undefined-is-a-function

"undefined is not a function"? — It is now!

use-interval

A custom React Hook that provides a declarative setInterval called useInterval.

react-af

Allows you to code using certain React.next features today! Perfect for component library maintainers.

styled-shortcuts

Provides convenient props shortcut helper for Styled Components 💅

superjson-remix

render-props

Easily and reliably support Render Props, Component Injection, and Function as a Child

use-firebase-auth

A custom React Hook that provides a declarative interface for Firebase Auth.

remix-etag

use-instance

A custom React Hook that provides a sensible alternative to useRef for storing instance variables.

use-visibility-change

Know how long it's been since a user has "seen" your app.

big-sur-icons

A collection of re-imagined icons for popular apps in the macOS Big Sir style

reclass

Write React stateful components without worrying about this or binding methods.

transformer-open-graph

splashr

A React component that takes the effort out of adding a Splash Screen to your web application.

react-router-relative-link

Allows react-router's Link component to accept relative paths.

use-firebase-app

json_

Converts camelCase JavaScript objects to JSON snake_case and vise versa.

use-prev-prop

A custom React Hook that maintains a previous value for a prop (or any other value).

lambdog-server

Write Netlify functions without pulling your hair out.

use-firebase-database

styled-units

You might want to try https://github.com/donavon/styled-shortcuts instead

styled-shortcut-components

A convenience package that wraps styled-components with styled-shortcuts.

init-readme

An opinionated README.md generator for npm utility packages

garage-door

hrd

An npx utility to make it easy to hoard, um… reserve an npm name.

use-pdf

intl-parse-accept-language

lloop

A React JSX Loop component with the lloopy name

xcop

An XHR Cross Origin Proxy

react-proxy-hook

Helps you test a React Hook

use-cached-state

binclock

A binary clock written in React using TypeScript

remix-patches

donavon

react-extended-render

Extends React's `Component` by passing `props`, `state`, and `context` to the `render` method of a class.

render-fragment

consoleit

Utility to append console messages to the DOM. Useful when using RequireBin, JSFiddle, or the like.

Star-Wars-Episode-I-The-Phantom-Menace

Script for "Star Wars: Episode I – The Phantom Menace" entirely using git commit messages. Like it? Give it a ⭐️ on GitHub.

use-step-multi-step-form-demo

Created with CodeSandbox

crapp-ts

An npx utility to run create-react-app with the TypeScript template.

animated-placeholder

lambdog-client

spreadlove.io

react-wobbly-spinner

A Wobbly Spinner Component for React

multi-cookie-session

chime-devices

This package contains a React context provider and a hook around AWS Chime for capturing system audio and video devices.

build-uri-path

Reliably build a Uri path

resume

prevent-default

A wrapper that calls `event.preventDefault()` for you.

render-array

netlify-faunadb-example

thwack-resolve

A tiny functional equivalent to` new URL(url, base).href`

babel-plugin-transform-class-private-properties

A Babel transform to convert pseudo-private "underscore convention" private class properties to truly private properties.