# @react-toolbelt/utils

> Helper functions and utilities for React to perform everyday tasks faster.

Latest version **0.2.0** (published 2023-03-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-toolbelt/utils
pnpm add @react-toolbelt/utils
yarn add @react-toolbelt/utils
bun add @react-toolbelt/utils
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-03-07 |
| First published | 2023-03-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jayanta Samaddar |
| Maintainers | jayantasamaddar |
| Keywords | react, react-utils, dom, react-tools, typescript, javascript |

## Links

- npm: https://www.npmjs.com/package/@react-toolbelt/utils
- Repository: https://github.com/jayantasamaddar/react-hooks-dom
- Homepage: https://github.com/jayantasamaddar/react-hooks-dom#readme
- Issues: https://github.com/jayantasamaddar/react-hooks-dom/issues
- npm.io page: https://npm.io/package/@react-toolbelt/utils

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2023-03-07
- 0.1.1 — 2023-03-04
- 0.1.0 — 2023-03-03

## README

# @react-toolbelt/utils

A collection of utility functions for React that improve the developer
experience considerably. Makes performing complex tasks like validation of
children components before generating content, wrapping each children with a
wrapper component, conditional rendering only when rendering on the client side,
and many more utilities for React. Pairs well with the
[`@react-toolbelt/hooks`](https://www.github.com/jayantasamaddar/react-toolbelt/tree/main/src/react-toolbelt-hooks).

---

## Installation

You can install this package using npm:

```s
# Using npm
npm i @react-toolbelt/utils

# Using yarn
yarn add @react-toolbelt/utils
```

---

## The Problem Statement

**Previous implementation 1**

A vanilla implementation without using `@react-toolbelt/utils` would look like
this:

```tsx
const isValidAccordionGroup = (children: ReactNode) => {
  if (Children.count(children) !== 2) return false;
  const childrenHashTable = { header: 0, panel: 0 };
  Children.forEach(children, (child) => {
    if (child instanceof AccordionHeader) childrenHashTable.header += 1;
    else if (child instanceof AccordionPanel) childrenHashTable.panel += 1;
  });

  return childrenHashTable.header === 1 && childrenHashTable.panel === 1;
};
```

But as you can notice, this has its limitations, as you now have to write a
validation checker for every component that requires children validation.

Using `isValidChildren` we can determine if the children props are valid
consistently using the same syntax throughout.

**Previous Implementation 2**

```tsx
const isValid = Children.toArray(children).every((child) => {
  isValidElement(child) && child instanceof AccordionGroup;
});
```

---

## Usage

The package provides a set of utility functions that can be imported and used in
your React project.

```jsx
import { validateChildrenType, isServer } from '@react-toolbelt/utils';

// usage of validateChildrenType
const MyComponent = ({ children }) => {
  validateChildrenType(children, ['div', 'span']); // will throw an error if children is not a div or span
  return <div>{children}</div>;
};

// usage of isServer
if (isServer()) {
  // run server side code
} else {
  // run client side code
}
```

---

## List of utility functions

The package provides the following utility functions:

- `validateChildrenType(children: ReactNode, types: string[]): void`: This
  function takes two arguments, the children to validate and an array of types
  to check against. It throws an error if the children type does not match any
  of the specified types.
- `isServer(): boolean`: This function checks if the code is running on the
  server or the client side. It returns true if the code is running on the
  server, false otherwise.

---

## Contributing

Contributions to this package are welcome. Please open an issue or a pull
request with your suggestion or improvement.

Before making any changes, please read the contributing guidelines.

---

## License

This package is licensed under the MIT license. See the LICENSE file for more
information.

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