https://github.com/donavon/use-prev-prop
A custom React Hook that maintains a previous value for a prop (or any other value).
https://github.com/donavon/use-prev-prop
hooks props react reactjs
Last synced: 9 months ago
JSON representation
A custom React Hook that maintains a previous value for a prop (or any other value).
- Host: GitHub
- URL: https://github.com/donavon/use-prev-prop
- Owner: donavon
- License: mit
- Created: 2019-09-26T22:34:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T11:30:48.000Z (over 3 years ago)
- Last Synced: 2025-09-22T07:56:54.883Z (9 months ago)
- Topics: hooks, props, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 782 KB
- Stars: 16
- Watchers: 3
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @use-it/prev-prop
[](https://badge.fury.io/js/%40use-it%2Fprev-prop)
[](#contributors)
A custom React Hook that maintains a previous value for a prop (or any other value).
Based on [a tweet](https://twitter.com/chrisachard/status/1177308524877144065)
by [Chris Achard](https://github.com/chrisachard).
## Installation
```bash
$ npm i @use-it/prev-prop
```
or
```bash
$ yarn add @use-it/prev-prop
```
## Usage
Here is a basic setup.
```js
const previousProp = usePrevProp(prop);
```
### Parameters
Here are the parameters that you can use.
| Parameter | Description |
| :--------- | :------------------------------------------------------------------------------- |
| `prop` | The current prop |
### Return
This hook returns the previous value of the prop. Initially, this value will be `undefined`.
## Example
Let's look at some sample code. Here is a `Count` component that displays the count and the previous count.
```js
import React from 'react';
import usePrevProp from '@use-it/prev-prop';
const Count = ({ count }) => {
const prevCount = usePrevProp(count);
return (
Current Count: {count}
Prev Count: {prevCount}
);
};
export default Count;
```
## License
**[MIT](LICENSE)** Licensed
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Donavon West
🚇 ⚠️ 💡 🤔 🚧 👀 🔧 💻
chrisachard
🤔
Leza Morais Lutonda
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!