Typesafe converter of React hooks to React hocs 🤓
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.
npm install hook2hoc
The main purpose of this project is to easily reuse your custom hooks logic in class components.
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 <input value={value} onChange={onChange} />;
}
}
export default hook2hoc("formInput", useFormInput)(ClassComponent)
// or with default args
export default hook2hoc("formInput", useFormInput, ["initalValue"])(ClassComponent)
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 **
hook2hoc("formInput", useFormInput)(ClassComponent, (props) => [props.someValueFromOutside])
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
import { hook2hoc, tuple } from "hook2hoc"
function useFormInput(defaultValue: string, foo?: number) {
const [value, setValue] = React.useState(defaultValue);
return {
value,
onChange: (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)
};
}
type Props = {
someAnotherProp: string;
formInput: ReturnType<typeof useFormInput>;
};
class ClassComponent extends React.Component<Props> {
render() {
const { value, onChange } = this.props.input;
return <input value={value} onChange={onChange} />;
}
}
// tuple required for strict parameters type casting
const WithHook = hook2hoc("formInput", useFormInput)(
ClassComponent,
props => tuple(["initialValue"])
)
<WithHook someAnotherProp="required as well" />