# bresnow_utility-react-hooks

> Modular utility hooks that we often use grouped in one package. Written in TypeScript, documented, tested and maintained.Disclaimer: at least React 16 is needed (the one with hooks ;) )

Latest version **0.2.9** (published 2022-05-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install bresnow_utility-react-hooks
pnpm add bresnow_utility-react-hooks
yarn add bresnow_utility-react-hooks
bun add bresnow_utility-react-hooks
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2022-05-27 |
| First published | 2022-04-16 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8 |
| Dependencies | 4 |
| Unpacked size | 32.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bresnow |
| Maintainers | bresnow-design |
| Keywords | react, hooks, utility, bresnow, useIf, useLZ, object, compression, lz-object, lzma, lz-string, utf-16, base64, uint8array |

## Links

- npm: https://www.npmjs.com/package/bresnow_utility-react-hooks
- Repository: https://github.com/bresnow/utility-hooks
- npm.io page: https://npm.io/package/bresnow_utility-react-hooks

## Dependencies (4)

- [react](https://npm.io/package/react.md) 18.1.0-next-fc47cb1b6-20220404
- [lz-object](https://npm.io/package/lz-object.md) ^0.1.7
- [react-dom](https://npm.io/package/react-dom.md) 18.1.0-next-fc47cb1b6-20220404
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## 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) — 2022-05-27
- 0.2.7 — 2022-04-22
- 0.2.6 — 2022-04-22
- 0.2.5 — 2022-04-21
- 0.2.4 — 2022-04-21
- 0.2.3 — 2022-04-18
- 0.2.2 — 2022-04-18
- 0.2.1 — 2022-04-17
- 0.2.0 — 2022-04-17
- 0.1.9 — 2022-04-17
- 0.1.8 — 2022-04-17
- 0.1.73 — 2022-04-17
- 0.1.72 — 2022-04-17
- 0.1.71 — 2022-04-17
- 0.1.7 — 2022-04-17
- … 11 more at https://npm.io/package/bresnow_utility-react-hooks/versions

## README

# bresnow_utility-react-hooks

Custom react hooks I have built and use regularly.

![Image](./img/hooksIndex.png)

```terminal
yarn add bresnow_utility-react-hooks
```

## useIf

 If statement hook that returns statement if condition is true. Useful when a normal if statement is causing infinite render errors. Conditions are listed as an array dependencies and eliminates the need for && operators.
 Optional else callback parameter to run when condition is false. **Note: else option runs on every render the conditions !== true.**

 ```javascript  
 {else: ()=>void }
 ```

```javascript
import { useIf } from "bresnow_utility-react-hooks";

 useIf( [auth.keys, auth.isLoggedIn === true ],
  () => {

  nodepathSet(`~${auth.keys?.pub}.${path}`);

  }, { else: 
  () => {

      log("condition is still not true");

  }});

  log(nodepath, "nodepath");   
  //  ['~YQus5nDLVi5PG5BJXGTLoizIWbnrNN9NRER3-0RbqV0.eaV67IswAG3zCf5C5qqR7mF7EwgfmqIsjgf1MDhSNPA.pages.index', 'nodepath']
```


## useContextReducer

Create contexts and providers as if using "useReducer".

``` javascript
import { useContextReducer } from "bresnow_utility-react-hooks";

const initialState = {
  hidden: true,
  cartItems: [],
  address: null,
};

  function cartReducer(state: State, action: Action): State {
  console.log(state, 'context state');

  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        cartItems: addItemToCart(state.cartItems, action.payload),
      };
    case 'CLEAR_CART':
      return {
        ...state,
        cartItems: [],
      };
    default: {
       throw new Error(`Unhandled action type: ${action.type}`);
     }
  }
  

  const [useCartState, useCartDispatch, CartProvider] = useContextReducer(
  cartReducer,
  initialState
);
```

## useSafeEffect

runs useEffect when window is undefined and useLayoutEffect when window is not undefined.

## useSafeCallback

useCallback that runs only when mounted and takes no dependencies.

## useSafeReducer

useReducer but the dispatch runs only when mounted.

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