React utils

A library of custom React hooks that help manage advanced React features like State and Accessibility.

• Checkout the docs

What role does this package play in Pando?

erDiagram
  PANDO ||--o{ DESIGN-TOKENS : contains
  PANDO ||--o{ ICONS : contains
  PANDO ||--o{ HEADLESS-STYLES : contains
  PANDO ||--o{ REACT-UTILS : contains
  DESIGN-TOKENS ||..|{ NORMALIZE-SETUP : contains
  NORMALIZE-SETUP ||..|{ THEMES : contains
  HEADLESS-STYLES ||--|{ DESIGN-TOKENS : uses

This package utilizes the latest version of React to export custom hooks to use along with Headless Styles or independently from Pando.

React Utils General Function

The react-utils package is independent from the Pando sister libraries, but works cohesively when combined with them. It's true purpose is to provide custom hooks that successfully work along side Headless Styles within the Pando Normalize system (i.e. themes, etc.).

However, most if not all custom hooks should work successfully outside of Pando due to the nature of its design.

Install

This project uses pnPm so there are no setup commands needed. If you get any errors, you may need to run an initial pnpm install or ensure you are using Node >= 18.

Development

There is no development sandbox for this specific project, but most of the time, we import the hooks into the Headless Styles sandbox which is just as easy.

From the root directory of the project, run:

pnpm start:sandbox

Testing

To run your unit tests, make sure you are in the project root directory not this workspace - and run:

pnpm test

Contribution

If you plan on contributing to this project, please take time to read our CONTRIBUTING.md. Pull requests that do not adhere to the requirements in this doc will automatically be flagged and closed.