Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MarvelSQ/use-properties-hook
A React hook - instance variables with useRef
https://github.com/MarvelSQ/use-properties-hook
hook react
Last synced: 3 months ago
JSON representation
A React hook - instance variables with useRef
- Host: GitHub
- URL: https://github.com/MarvelSQ/use-properties-hook
- Owner: MarvelSQ
- Created: 2019-03-07T09:13:16.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-10T16:13:13.000Z (almost 6 years ago)
- Last Synced: 2024-04-26T21:03:15.156Z (9 months ago)
- Topics: hook, react
- Language: JavaScript
- Size: 31.3 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-react-hooks - `@marvelsq/use-properties-hook` - properties` and equal in `ShallowCompare` (Packages)
- awesome-react-hooks-cn - `@marvelsq/use-properties-hook` - properties` and equal in `ShallowCompare` (Packages)
- awesome-react-hooks - `@marvelsq/use-properties-hook` - properties` and equal in `ShallowCompare` (Packages)
- awesome-react-hooks - `@marvelsq/use-properties-hook` - properties` and equal in `ShallowCompare` (Packages)
README
# use-properties-hook
bind variables to current Component, like **_class-properties_**
## install
```
npm install @marvelsq/use-properties-hook
```## use
- **useProperty(any):any** bind single variable
- **useProperties(...any):[...any]** bind multiple variable
```js
import React, { useState } from 'react';
import { useProperties } from '@marvelsq/use-properties-hook';export default function App({ data, updateData }) {
// state
const [active, setActive] = useState(null);
// functions always same
const [handleClick, handleRemove] = useProperties(
index => setActive(index),
targetIndex => {
updateData(data.filter((data, index) => targetIndex !== index));
setActive(data[index - 1] ? index - 1 : null);
}
);return ;
}
```**inspired by [Making setInterval Declarative with React Hooks](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)**