https://github.com/dmtrkovalenko/hook2hoc
Typesafe converter of React hooks to React hocs 🤓
https://github.com/dmtrkovalenko/hook2hoc
Last synced: about 1 year ago
JSON representation
Typesafe converter of React hooks to React hocs 🤓
- Host: GitHub
- URL: https://github.com/dmtrkovalenko/hook2hoc
- Owner: dmtrKovalenko
- License: mit
- Created: 2019-02-14T12:52:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T03:20:23.000Z (over 3 years ago)
- Last Synced: 2025-05-05T07:35:18.299Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 610 KB
- Stars: 25
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hook2hoc
> Typesafe converter of React hooks to React hocs 🤓
[](https://www.npmjs.com/package/hook2hoc)
[](https://bundlephobia.com/result?p=hook2hoc@1.0.0)
[](https://codecov.io/gh/dmtrKovalenko/hook2hoc)
[](https://travis-ci.com/dmtrKovalenko/hook2hoc)
## What and why
Main purpose of this project is making integration of hooks much easier. It allowes primarily use hooks, and generate HOCs from on the flight.
This is an automate and type-safe converter of **React hooks** to ~~React HOCs~~. Just move your logic to hook, create a HOC for compatability and go.
## Installation
```sh
npm install hook2hoc
```
## Usage
The main purpose of this project is to easily reuse your custom hooks logic in class components.
```jsx
import { hook2hoc } from "hook2hoc"
function useFormInput(defaultValue) {
const [value, setValue] = React.useState(defaultValue);
return {
value,
onChange: e => setValue(e.target.value)
};
}
class ClassComponent extends React.Component {
...
render() {
const { value, onChange } = this.props.formInput;
return ;
}
}
export default hook2hoc("formInput", useFormInput)(ClassComponent)
// or with default args
export default hook2hoc("formInput", useFormInput, ["initalValue"])(ClassComponent)
```
### Dynamic props
It is also possible to pass arguments to your hooks directly from the props. Just use function instead of array in last argument.
**!! If you need dynamyc props as arguments place it after component **
```jsx
hook2hoc("formInput", useFormInput)(ClassComponent, (props) => [props.someValueFromOutside])
```
### Type safety
This helper was created with static typing in mind. For typescript users it will infer the types properly.
One thing is required for dynamic props
```typescript
import { hook2hoc, tuple } from "hook2hoc"
function useFormInput(defaultValue: string, foo?: number) {
const [value, setValue] = React.useState(defaultValue);
return {
value,
onChange: (e: React.ChangeEvent) => setValue(e.target.value)
};
}
type Props = {
someAnotherProp: string;
formInput: ReturnType;
};
class ClassComponent extends React.Component {
render() {
const { value, onChange } = this.props.input;
return ;
}
}
// tuple required for strict parameters type casting
const WithHook = hook2hoc("formInput", useFormInput)(
ClassComponent,
props => tuple(["initialValue"])
)
```