# hookly

> A React plugin to present hooks as higher order functions

Latest version **0.0.14** (published 2019-03-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install hookly
pnpm add hookly
yarn add hookly
bun add hookly
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.14 |
| Published | 2019-03-13 |
| First published | 2018-12-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Matt McCorry |
| Maintainers | mccorry |
| Keywords | react, higher-order, components, microcomponentization, toolkit, utilities, composition, recompose |

## Links

- npm: https://www.npmjs.com/package/hookly
- Repository: https://github.com/luhis/react-hooks-wrapper
- Homepage: https://github.com/luhis/react-hooks-wrapper#readme
- Issues: https://github.com/luhis/react-hooks-wrapper/issues
- npm.io page: https://npm.io/package/hookly

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.14 (latest) — 2019-03-13
- 0.0.13 — 2019-01-05
- 0.0.12 — 2019-01-05
- 0.0.12-alpha6 — 2019-01-03
- 0.0.12-alpha5 — 2019-01-03
- 0.0.12-alpha4 — 2019-01-03
- 0.0.12-alpha3 — 2019-01-03
- 0.0.12-alpha2 — 2019-01-03
- 0.0.12-alpha1 — 2019-01-03
- 0.0.11 — 2019-01-01
- 0.0.10 — 2018-12-30
- 0.0.9 — 2018-12-28
- 0.0.8 — 2018-12-28
- 0.0.7 — 2018-12-28
- 0.0.6 — 2018-12-26
- … 3 more at https://npm.io/package/hookly/versions

## README

# hookly

This project aims to overcome some of the issues in React Hooks.  It should also allow for easier migration from Recompose to React Hooks.

Consider the following example:

```TypeScript
const Counter: FunctionComponent<{ name: string }> = ({ name }) => {
    const [count, setCount] = useState(1);
    return <div>
        <p>Hi {name}, You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
            Click me
      </button>
    </div>;
}
```

It is a functional component with state.  It mixes both the state, and the presentation in the same code.

We can fix this by splitting the presentation and the state into two components, the presentation component, and a container component.

```TypeScript
const Counter:
    FunctionComponent<{ count: number, name: string, setCount: Dispatch<SetStateAction<number>> }> =
    ({ name, count, setCount }) => {
        return <div>
            <p>Hi {name}, You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>;
    }

const CounterContainer: FunctionComponent<{ name: string }> = ({ name }) => {
    const [count, setCount] = useState(1);
    return <Counter name={name} count={count} setCount={setCount} />
}
```

More abstracted again

```TypeScript
const Counter:
    FunctionComponent<{ count: number, name: string, setCount: Dispatch<SetStateAction<number>> }> =
    ({ name, count, setCount }) => {
        return <div>
            <p>Hi {name}, You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>;
    }

const CounterContainer: FunctionComponent<{ name: string }> = props => {
    const [count, setCount] = useState(1);
    const finalProps = { ...props, count, setCount };
    return <Counter {...finalProps} />;
}
```

It is possible to abstract the container component further, eventually creating a generic higher order component that will allow you to apply useState hooks to any component, allowing you to map the hook results to the properties of the component.

```TypeScript
interface IProps { count: number; name: string; setCount: setState<number>; }

const Counter: FunctionComponent<Props> = ({ count, setCount, name }) =>
  <div>
    <p>Hi {name}, You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  </div>;
// ContainerCounter has type React.FunctionComponent<{ name: string }> but TS will infer this
const CounterContainer = stateWrapper(1, ([count, setCount]) => ({ count, setCount }))(Counter);
```

---
_Source: https://npm.io/package/hookly · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._