wojtekmaj/react-lifecycle-methods-diagram

Stars
3,870
Rank 11,329 (Top 0.3 %)
Language
TypeScript
License
MIT License
Created over 6 years ago
Updated 3 months ago

wojtekmaj/react-lifecycle-methods-diagram

wojtekmaj

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

Interactive React Lifecycle Methods diagram.

React Lifecycle Methods diagram

An interactive version of React Lifecycle Methods diagram tweeted by Dan Abramov. Built with React, obviously.

I did my best to make the diagram fully accessible, both for keyboard navigation and screen readers for visually impaired people.

Online version is also available!

How to use the diagram

Click any method name to read its official documentation (opens in a new tab).
Methods in bold are the most common ones.
Actions that are not methods, but otherwise help reading the diagram, are in italics.

Collaboration

You are welcome to raise issues and create pull requests.

Particularly valuable contributions are those regarding i18n as I only know so many languages. Adding new locale is pretty easy, but there's a separate i18n guide in case you get lost.

You can also add a new version of the diagram in case React lifecycle methods are changed. There is a separate versions guide in case you get lost.

Prerequisites

To contribute, you need to have the following prerequisites installed:

Node.js
Yarn
IDE of your choice

Starting the project

yarn install (first time only)
yarn start

Building the project

yarn build

License

The MIT License.

Author

Wojciech Maj
[email protected]
https://wojtekmaj.pl

Thank you

Sponsors

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.

Backers

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Top Contributors

Thank you to all our contributors that helped on this project!

react-pdf

Display PDFs in your React app as easily as if they were images.

react-calendar

Ultimate calendar for your React app.

react-date-picker

A date picker for your React app.

react-datetime-picker

A datetime picker for your React app.

react-daterange-picker

A date range picker for your React app.

react-clock

An analog clock for your React app.

react-time-picker

A time picker for your React app.

enzyme-adapter-react-17

Unofficial adapter for React 17 for Enzyme.

react-datetimerange-picker

A datetime range picker for your React app.

react-timerange-picker

A time range picker for your React app.

react-hooks

A collection of React Hooks.

get-user-locale

A function that returns user's locale as an IETF language tag, based on all available sources.

country-code-to-flag-emoji

A function that returns a flag emoji given IETF language tag.

make-cancellable-promise

Make any Promise cancellable.

merge-refs

A function that merges React refs into one.

react-fit

Fit a popover element on the screen.

detect-element-overflow

A function that tells you whether a given element is overflowing its container or not. Useful for creating dropdowns and tooltips.

date-utils

A collection of date-related utilities.

yarn-plugin-nolyfill

Yarn Berry plugin that replaces unnecessary polyfills with native implementations.

opening-hours-utils

A collection of opening hours-related utilities.

merge-class-names

A function that merges given class names, no matter their format: string with single or multiple class names or an array of class names. Filters out invalid class names as well.

react-t

Simple translation module for React applications.

recreate-from-source-maps

Recreate a Webpack project just by providing an URL.

color-utils

A collection of color-related utilities.

async-array-utils

A collection of array-related async utilities.

react-async-button

A button that handles Promises for your React app.

vite-plugin-simple-html

Vite plugin for HTML processing and minification

i18n-compare

Generates a summary of differences between two i18n files

package-manager-stats

Script to get stats about package managers used in most popular projects on GitHub.

make-event-props

Returns an object with on-event callback props curried with provided args.

predict-input-value

Predicts the input value during KeyDown or KeyPress events, before the input is actually changed

timezone-coworking-tool

A tool to help with coworking with people in different timezones.

eslint-config-wojtekmaj

ESLint configuration by wojtekmaj

next-turbopack-nodenext

Adds module: NodeNext support to Turbopack in Next.js.

is-valid-nip

Check if a number is a valid Numer Identyfikacji Podatkowej (NIP).

update-input-width

A function that given input element, updates its width to fit its content.

uwp-web-framework

Universal Windows Platform web framework

is-valid-abn

Check if a number is a valid Australian Business Number (ABN).

is-valid-regon

Check if a number is a valid REGON.

eslint-staged-files

Run ESLint on staged files only.

nightmare-advanced-click

Extends Nightmare with .rightClick(), .middleClick(), .ctrlClick() and other actions.

is-valid-pesel

Check if a number is a valid PESEL.

is-valid-australian-postcode

Check if a number is a valid Australian postcode.

is-valid-acn

Check if a number is a valid Australian Company Number (ACN).

webpack-summary-compare

Generates a summary of differences between two Webpack summaries

is-valid-utr

Check if a number is a valid Unique Taxpayer Reference (UTR).