|
| 1 | +# react-component-update |
| 2 | + |
| 3 | +[](https://travis-ci.org/wimpyprogrammer/react-component-update) |
| 4 | +[](https://codecov.io/gh/wimpyprogrammer/react-component-update) |
| 5 | + |
| 6 | +Adds convenience lifecycle events to your React components. |
| 7 | + |
| 8 | + - `componentWillMountOrReceiveProps(nextProps)` - Combines the [`componentWillMount()`](https://facebook.github.io/react/docs/react-component.html#componentwillmount) and [`componentWillReceiveProps(nextProps)`](https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops) events. This allows you to consolidate all pre-`render()` logic. |
| 9 | + |
| 10 | + - `componentDidMountOrUpdate(prevProps, prevState)` - Combines the [`componentDidMount()`](https://facebook.github.io/react/docs/react-component.html#componentdidmount) and [`componentDidUpdate(prevProps, prevState)`](https://facebook.github.io/react/docs/react-component.html#componentdidupdate) events. This allows you to consolidate all post-`render()` logic. |
| 11 | + |
| 12 | +## Installation |
| 13 | + |
| 14 | +Published on `npm` as [`react-component-update`](https://www.npmjs.com/package/react-component-update). |
| 15 | + |
| 16 | +npm users: |
| 17 | +``` |
| 18 | +npm install --save react-component-update |
| 19 | +``` |
| 20 | + |
| 21 | +yarn users: |
| 22 | +``` |
| 23 | +yarn add react-component-update |
| 24 | +``` |
| 25 | + |
| 26 | +`react-component-update` does not include its own version of React. It will use whatever version is already installed in your project. |
| 27 | + |
| 28 | +## Usage |
| 29 | + |
| 30 | +To extend React's `Component` class: |
| 31 | + |
| 32 | +```js |
| 33 | +import React from 'react'; |
| 34 | +import { Component } from 'react-component-update'; |
| 35 | + |
| 36 | +class MyReactComponent extends Component { |
| 37 | + componentWillMountOrReceiveProps(nextProps) { |
| 38 | + // Code that runs before every render(). For example, check that the data |
| 39 | + // used by this component has already loaded, otherwise trigger an AJAX |
| 40 | + // request for it. nextProps contains the props that render() will receive. |
| 41 | + } |
| 42 | + |
| 43 | + componentDidMountOrUpdate(prevProps, prevState) { |
| 44 | + // Code that runs after every render(). For example, inspect the latest DOM |
| 45 | + // to get the height of the rendered elements. prevProps and prevState |
| 46 | + // contain the props and state that render() will receive. |
| 47 | + } |
| 48 | + |
| 49 | + render() { |
| 50 | + return <div />; |
| 51 | + } |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +Or to extend React's `PureComponent` class (available in React v15.3.0+): |
| 56 | +```js |
| 57 | +import { PureComponent } from 'react-component-update'; |
| 58 | +``` |
| 59 | + |
| 60 | +For compatibility with [`create-react-class`](https://www.npmjs.com/package/create-react-class), use the `withEvents()` higher-order component. |
| 61 | + |
| 62 | +```js |
| 63 | +import createReactClass from 'create-react-class'; |
| 64 | +import { withEvents } from 'react-component-update'; |
| 65 | + |
| 66 | +const MyReactComponent = createReactClass(withEvents({ |
| 67 | + componentWillMountOrReceiveProps: function(nextProps) { |
| 68 | + // Code that runs before every render(). |
| 69 | + }, |
| 70 | + |
| 71 | + componentDidMountOrUpdate: function(prevProps, prevState) { |
| 72 | + // Code that runs after every render(). |
| 73 | + }, |
| 74 | + |
| 75 | + render: function() { |
| 76 | + return <div />; |
| 77 | + } |
| 78 | +})); |
| 79 | +``` |
| 80 | + |
| 81 | +## Mixing with your own lifecycle events |
| 82 | + |
| 83 | +`react-component-update` implements four lifecycle events of the React base classes: |
| 84 | + - `componentWillMount()` |
| 85 | + - `componentDidMount()` |
| 86 | + - `componentWillReceiveProps()` |
| 87 | + - `componentDidUpdate()` |
| 88 | + |
| 89 | +If you extend `Component` or `PureComponent` from `react-component-update` and you also implement these events in your component, you will need to call the corresponding `super()` method like so: |
| 90 | + |
| 91 | +```js |
| 92 | +componentWillMount() { |
| 93 | + super.componentWillMount(); |
| 94 | +} |
| 95 | + |
| 96 | +componentDidMount() { |
| 97 | + super.componentDidMount(); |
| 98 | +} |
| 99 | + |
| 100 | +componentWillReceiveProps(nextProps) { |
| 101 | + super.componentWillReceiveProps(nextProps); |
| 102 | +} |
| 103 | + |
| 104 | +componentDidUpdate(prevProps, prevState) { |
| 105 | + super.componentDidUpdate(prevProps, prevState); |
| 106 | +} |
| 107 | +``` |
| 108 | + |
| 109 | +The `super()` method can be called anywhere in your function to suit your needs. |
| 110 | + |
| 111 | +If you use the `withEvents()` higher-order component, you do not need to add any extra code to your events. The new event (ex. `componentDidMountOrUpdate()`) will always run after the related built-in event (ex. `componentDidUpdate()`). |
| 112 | + |
| 113 | +## License |
| 114 | + |
| 115 | +[MIT](/LICENSE.md) |
0 commit comments