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: 2 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-03-10T16:13:13.000Z (over 5 years ago)
• Last Synced: 2024-03-26T16:20:21.900Z (3 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

Lists

• 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)
• fucking-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/)**