DOCSEARCHbyAlgolia
Submit Docs

unleashit npm-library

website·Indexed 29 days ago

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

A collection of individually installable React UI components written with TypeScript. The library includes form builders like Quick Form (a React Hook Form wrapper), authentication components (Login, Signup, Forgot Password) with Zod schema validation, and UI widgets such as a recursive data lister, responsive pagination, modals, and navigation. It supports dark mode and CSS Custom Properties for styling and theming.

Tokens
10.4K
Snippets
52
Records
62
Agent score
74%

What's inside unleashit npm-library

  1. Overview of the React UI component library

    This library provides a collection of React UI components written in TypeScript that are individually installable via npm. The components are designed to be responsive and customizable, with many offering built-in support for client and server-side validation.

  3. Install peer dependencies for Form components

    To use the Form components in this library, you must install the following peer dependencies to handle form state, validation resolvers, and schema definition:
    npm install react-hook-form @hookform/resolvers zod

  4. Apply styles using standard CSS or CSS Modules

    Components provide styling in two formats: standard BEM-namespaced CSS and CSS Modules.

    1. Standard CSS: Import the CSS file directly: import '@unleashit/[package-name]/dist/[component-name].css'.
    2. CSS Modules: Use the cssModule prop to pass a CSS module object. The provided module can be imported as import css from '@unleashit/[package-name]/dist/[component-name].module.css'.

    When using custom modules, you can target internal class names by converting BEM class names (e.g., unl-[component-name]__[style-name-with-dashes]) into camelCase keys (e.g., [styleNameCamelCase]) in your module.

    import defaultCSS from '@unleashit/login/dist/login.module.css';
import overrides from './styles/login-overrides.module.css';

const cssModule = {
  ...defaultCSS,
  ...overrides,
};

const MyLogin = () => <Login handler={/* ... */} cssModule={cssModule} />;

  5. Install @unleashit/signup

    Install the signup component using your preferred package manager. Note that this component requires several peer dependencies to function correctly.
    npm install @unleashit/signup

    Peer dependencies:

    • react
    • react-hook-form
    • @hookform/resolvers
    • zod

  10. Install @unleashit/forgot-password

    Install the forgot password component library using npm, Yarn, or pnpm. Ensure that the required peer dependencies are installed in your project.
    npm install @unleashit/forgot-password

    Peer dependencies:

    • react
    • react-hook-form
    • @hookform/resolvers
    • zod

  12. Install @unleashit/login

    Install the login component using npm, Yarn, or pnpm. Note that this package requires the following peer dependencies: react, react-hook-form, @hookform/resolvers, and zod.
    npm install @unleashit/login