# react-claws

> Semi-source-compatible React Hooks compatible layers.

Latest version **1.0.2** (published 2019-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-claws
pnpm add react-claws
yarn add react-claws
bun add react-claws
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-02-05 |
| First published | 2019-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pisin Roengniransathit |
| Maintainers | pisinr |

## Links

- npm: https://www.npmjs.com/package/react-claws
- npm.io page: https://npm.io/package/react-claws

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.4.0
- [webpack](https://npm.io/package/webpack.md) ^4.29.1

## Recent versions

- 1.0.2 (latest) — 2019-02-05

## README

# React-Claws
A poor man's react-hooks.

## Overview

React-Claws allow you to write your React Component using hooks where hooks isn't yet available, for example on React Native.

## Requirement.

React 16+ (It uses new Context API).

## How to use React-Claws

To define a component:

```javascript
// ToggleButton.js
import withClaws from 'react-claws';
export default withClaws(({ useState }) => {

  return function ToggleButton({ titleA, titleB } => {
    const [count, setCount] = useState(false);
    const inc = () => setCount(count+1);
    return <button onClick={inc}>{`${inc}`}</button>
  })

}, 'StatedToggleButton'); // component name is optional
```

To define a claw(hook):

```javascript
// useCounter.js
import { customClaw } from 'react-claws';
export default customClaw(({ useState }) => {

  return function useCounter(() => {
    const [count, setCount] = useState(false);
    const inc = ()=> setCount((count) => count+1);
    return [count, inc];
  });

});
```

Basically, what you write inside `withClaws/customClaw` is what you would write if you use react-hooks. You will also see that the standard hooks such as `useState`, are available and injected as argument to the block.

You *have* to return the component from the block. You also can only define one component per `withClaws` block. It's prefered to put one componet per file and use `export default` for each of them.

## How it works.

React Claws create one extra HoC on wrapping your functional component.
It then bind hooks-like named methods and inject into the block for your component.

## Why Claws instead of standard React Component?

Hooks is simply easier to compose. It enables new way of thinking.
So I think it's worth a shot to be able to write hooks like approach in older React environment.

## Why Claws instead of `recompose`?

Level of nested component using `recompose` is just ridiculously high.
Claws adds exactly one component HoC on top of your functional component, regardless of how many hooks you use, with the exception of nested `Context.Consumer` which is unavoidable.

## WARNING: Claws probably will never be the same as hooks.

It is, first and foremost, my learning exercise done in a couple days.
You may find some bug. I'm certain I haven't completely copied all behavior of a hook in some edge case. I may even misunderstand how some hooks are supposed to work. Bugs reports and contributions are welcomed.

Since it's just a simple wrapper over standard React. It may never be able to completely mimic what hooks can do. Still, from what I have tested so far you shouldn't see any obvious different.

## Limitation.

1. It uses HoC, so `ref` is not going to point to your functional component.
2. `useEffect` currently works exactly at the same time as `useLayoutEffect`, in `componentDidXXX`. IMO, this is a minor behavior changes.
3. I could use some help on adding debugging info. But I don't want to spend times on this unless people actually uses this library.
4. Currently `forWardRef` to `ref=` props doesn't yet work. I think this is doable, though. Noted that `forwardRef` and `useImperativeHandle` still work if you pass it to a custom prop, say `innerRef`.
5. `useDebugValue` doesn't work with the debugger, obviously. You can use chrome react inspector to inspect the state of the component. You will see array of states. (NOTES: Claws doesn't actually need or use `this.state`, but I set it to point to the internal register stack just so that's debugging/inspecting is possible.)
6. My English is not the best. Contributions to correct any grammar mistakes are welcomed. Just be gentle :P

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