NPM and React Component Library

Collection of React components written with Typescript and individually installable with npm.

Documentation

https://unleashit.github.io/npm-library

Demo

https://npm-library-demo.vercel.app

FORMS

Not just dumb components, these offer out of the box functionality to handle both client and server validations, custom fields, success messages and more. Aside from React, required peer dependencies are react-hook-form, @hookform/resolvers and zod.

Authentication Suite

• Login - customizable, responsive login component with server support that validates against a default or custom Zod schema.
• Sign-up/registration - customizable, responsive signup component with server support that validates against a default or custom Zod schema.
• Forgot password - customizable, responsive set of forgot password components with server support that validate against a default or custom Zod schema.

Simple custom forms builder

• Quick Form - form generator that can quickly produce simple React forms with validation and server support. By default, it is a Contact form.

UI WIDGETS

• Navigation - customizable, responsive navigation component. Supports auth states and comes with an optional sidecar component for login/logout/signup.
• Pagination - sexy and responsive pagination component for React.
• Modal - customizable, responsive, portal free modal component. Optional animation state support when adding/removing from DOM.

OTHER

• Recursive Data Lister - component that recursively pretty prints nested lists or objects with various options for html markup and styling.
• Async Handler - HOC that takes an async function and returns views for loading, no-data and error states. It accepts an optional method to check a cache before the async function is run. Note: this package has been deprecated and will be archived in the near future. React Query is a more feature rich implementation based on React hooks.
• demo app is available for previewing the components that can be run in parallel with a demo backend to demonstrate server functionality.

Common Features

• Customizable with uniform APIs
• Default CSS with CSS module support that can override internal classes.
• cssVars prop can override any CSS vars without touching CSS.
• Light/Dark Modes.
• Forms support custom fields
• Common package greatly reduces individual package sizes.

How to Use

• Install the individual components via npm. See each component.
• To develop (also runs a component demo in the background): pnpm dev