# with-hook

> Higher-order component for using hooks in class components

Latest version **0.2.9** (published 2018-12-23) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install with-hook
pnpm add with-hook
yarn add with-hook
bun add with-hook
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2018-12-23 |
| First published | 2018-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Dibyo Majumdar |
| Maintainers | dibyo |
| Keywords | react, react16, react hooks, react custom hook, class components |

## Links

- npm: https://www.npmjs.com/package/with-hook
- Repository: https://github.com/mDibyo/with-hook
- npm.io page: https://npm.io/package/with-hook

## 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.2.9 (latest) — 2018-12-23
- 0.2.8 — 2018-12-23
- 0.2.7 — 2018-12-23
- 0.2.6 — 2018-12-23
- 0.2.5 — 2018-12-21
- 0.2.4 — 2018-12-21
- 0.2.3 — 2018-12-21
- 0.2.2 — 2018-12-21
- 0.2.1 — 2018-12-21
- 0.2.0 — 2018-12-21
- 0.1.0 — 2018-12-21

## README

# withHook

### DEPRECATED: The with-hook package is deprecated.
Consider using the [with-hooks-support](https://www.npmjs.com/package/with-hooks-support) package instead, which has a cleaner and more intuitive API for allowing hooks inside class components.

------

Unlock React Hooks inside class components.

```jsx
class FancyInput extends React.Component {
  render() {
    // `useFormInput` returns an object with `value` and `onChange` attributes.
    const WithFormInput = withHook(useFormInput);

    return (
      <WithFormInput>
        {inputProps => <input {...inputProps} />}
      </WithFormInput>
    );
  }
}
```

Check out the [Code Sandbox Demo](https://codesandbox.io/s/1rzlv358p7)!

## Usage

```bash
npm install with-hook
```

Then import
```js
import withHook from 'with-hook';
```

## Introduction

[React hooks](https://reactjs.org/docs/hooks-intro.html) (introduced in `react@17.0.0-alpha`) lets you use
state and other React features without writing a class ie. in functional components. The result is cleaner,
more readable code where the code for a single feature is colocated instead of being spread over several
life-cycle methods.

Now that you have rewritten all your features as hooks, how do you use them in your legacy class components?
Using the `withHook` higher order component, that's how!

Consider the following functional component:
```jsx
function FunctionalComponent() {
  const [width, setWidth] = useState(window.innerWidth);
  const handleWindowResize = () => setWidth(window.innerWidth);
  useEffect(() => {
    window.addEventListener('resize', handleWindowResize);
    return () => window.removeEventListener('resize', handleWindowResize);
  });

  return <div>The window width is {width}</div>;
}
```

We can add the same hooks code to our class component:
```jsx
class ClassComponent extends React.PureComponent {
  render() {
    const WithWindowWidth = withHook(() => {
      const [width, setWidth] = useState(window.innerWidth);
      const handleWindowResize = () => setWidth(window.innerWidth);
      useEffect(() => {
        window.addEventListener('resize', handleWindowResize);
        return () => window.removeEventListener('resize', handleWindowResize);
      });

      return width;
    });

    return (
      <WithWindowWidth>{width => <div>The window width is {width}</div>}</WithWindowWidth>
    );
  }
}
```

Now if we were to refactor all our hooks code into a custom hook
```jsx
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  const handleWindowResize = () => setWidth(window.innerWidth);
  useEffect(() => {
    window.addEventListener('resize', handleWindowResize);
    return () => window.removeEventListener('resize', handleWindowResize);
  });

  return width;
}
```

We can write our components like so:
```jsx
function FunctionalComponent() {
  const width = useWindowWidth();

  return <div>The window width is {width}</div>;
}

class ClassComponent extends React.PureComponent {
  render() {
    const WithWindowWidth = withHook(useWindowWidth);

    return (
      <WithWindowWidth>
        {width => <div>The window width is {width}</div>}
      </WithWindowWidth>
    );
  }
}
```

### Special case: Hooks that don't return a value

Now, suppose you don't care about the return value for a hook.
The child to the hook component can be a normal component instead of a render function.
```jsx
class AwesomeTextarea extends React.Component {
  constructor(props) {
    super(props);
    this.textareaRef = React.createRef();
  }

  render() {
    const WithAutosizing = withHook(() => useAutosizingTextarea(this.textareaRef));
    return (
      <WithAutosizing>
        <textarea ref={this.textareaRef} />
      <WithAutosizing>
    );
  }
}
```
Awesome!

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