@bonny-kato/r3-utils NPM

r3-utils

A library of reusable hooks, utilities, and components for React Router v7.

Installation

# Using npm
npm install @bonny-kato/r3-utils

# Using yarn
yarn add @bonny-kato/r3-utils

# Using pnpm
pnpm add @bonny-kato/r3-utils

Make sure you have the required peer dependencies installed:

pnpm add react react-dom react-router zod dayjs @bonny-kato/localstorage @bonnykato/simple-db

Features

🪝 Hooks: Custom React hooks for working with React Router and common web application patterns
🛠️ Utilities: Helper functions for common tasks like error handling, data validation, and query parameter manipulation
🧩 Components: Reusable React components that extend React Router functionality
📦 Submodule Imports: Import only what you need from specific submodules

Submodule Imports

You can import directly from submodules to improve code organization and potentially reduce bundle size:

// Import from specific submodules
import { CacheClient, CacheProvider } from "@bonny-kato/r3-utils/cache";
import { useBreadcrumb, useDebounce } from "@bonny-kato/r3-utils/hooks";
import { removeNullish, parseError } from "@bonny-kato/r3-utils/utils";

Available submodules:

@bonny-kato/r3-utils/auth
@bonny-kato/r3-utils/cache
@bonny-kato/r3-utils/access-control
@bonny-kato/r3-utils/hooks
@bonny-kato/r3-utils/http-client
@bonny-kato/r3-utils/utils
@bonny-kato/r3-utils/zod-common

For more details, see SUBMODULE_IMPORTS.md.

Available Utilities, Hooks, and Components

Below is a comprehensive list of all available utilities, hooks, and components organized by submodule.

Hooks (`@bonny-kato/r3-utils/hooks`)

Hook	Description
`useEventListener`	Hook for adding event listeners with automatic cleanup
`useBreadcrumb`	Generates breadcrumb navigation based on the current route path
`useDebounce`	Debounces a value, useful for search inputs and other scenarios
`useIsPathActive`	Determines if a given path is active in the current route
`useHandleSelectAllItems`	Manages selection of all items in a list
`useHandleSelectItem`	Manages selection of individual items in a list
`useLocationState`	Provides access to location state with type safety
`useNavigateWithQueryParams`	Navigation hook that preserves query parameters
`useScroll`	Manages scroll position and provides scroll-related utilities
`useSearchParamsState`	Provides a state-like interface for URL search parameters
`useSubmitData`	Simplifies form submission with loading and error states
`useUploadFile`	Handles file uploads with progress tracking

Components:

LinkWithQueryParams: A Link component that preserves query parameters

Utils (`@bonny-kato/r3-utils/utils`)

Utility	Description
`fakeNetwork`	Simulates network latency for testing and development
`createSearchParams`	Creates a search params string from an object
`parseSearchParams`	Parses a search params string into an object
`safeRedirect`	Safely redirects to a URL, preventing open redirects
`parseError`	Parses error objects into a standardized format
`getDurationFromNow`	Calculates duration between now and a given date
`conditionallyAddToArray`	Adds items to an array based on conditions
`removeNullish`	Removes nullish values from objects and arrays recursively
`formatAmount`	Formats numeric amounts with currency symbols and separators
`createEnvSchema`	Creates a schema for environment variables
`validateEnv`	Validates environment variables against a schema

Auth (`@bonny-kato/r3-utils/auth`)

Utility	Description
`Auth`	Authentication utility class for managing user sessions

Cache (`@bonny-kato/r3-utils/cache`)

Utility	Description
`CacheClient`	Client for caching data with various storage adapters
`MemoryAdapter`	In-memory cache adapter
`LocalStorageAdapter`	LocalStorage-based cache adapter

Components:

CacheProvider: Provider component for the cache context
useCacheContext: Hook for accessing the cache context

Access Control (`@bonny-kato/r3-utils/access-control`)

Utility	Description
`AccessControl`	Component for controlling access to UI elements
`AccessControlProvider`	Provider component for access control context
`useHasAccess`	Hook for checking if a user has access to a resource
`requireAccess`	Utility for requiring access to a resource
`generateMenuAccessControl`	Generates access control for menu items
`generateUserAccessControlConfig`	Generates access control configuration for users

HTTP Client (`@bonny-kato/r3-utils/http-client`)

Utility	Description
`HttpClient`	HTTP client for making API requests
`tryCatchHttp`	Utility for handling HTTP errors

Zod Common (`@bonny-kato/r3-utils/zod-common`)

Utility	Description
`PaginationType`	Zod schema for pagination types
`createOptionalRefinement`	Creates optional refinements for Zod schemas
`ApiListSchema`	Creates API list schemas
`ApiDetailsSchema`	Creates API details schemas
`ContainOnlyAlphabetic`	Validates that a string contains only alphabetic characters
`SelectInputOptionType`	Zod schema for select input options
`NoneEmptyStringSchema`	Creates a schema for non-empty strings

Development

# Install dependencies
pnpm install

# Build the library
pnpm build

# Run linting
pnpm lint

# Format code
pnpm format

License

MIT

react react-router hooks utilities components typescript

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

r3-utils

Installation

Features

Submodule Imports

Available Utilities, Hooks, and Components

Hooks (@bonny-kato/r3-utils/hooks)

Utils (@bonny-kato/r3-utils/utils)

Auth (@bonny-kato/r3-utils/auth)

Cache (@bonny-kato/r3-utils/cache)

Access Control (@bonny-kato/r3-utils/access-control)

HTTP Client (@bonny-kato/r3-utils/http-client)

Zod Common (@bonny-kato/r3-utils/zod-common)

Development

License

Hooks (`@bonny-kato/r3-utils/hooks`)

Utils (`@bonny-kato/r3-utils/utils`)

Auth (`@bonny-kato/r3-utils/auth`)

Cache (`@bonny-kato/r3-utils/cache`)

Access Control (`@bonny-kato/r3-utils/access-control`)

HTTP Client (`@bonny-kato/r3-utils/http-client`)

Zod Common (`@bonny-kato/r3-utils/zod-common`)