@msa_cli/react-composable NPM

@msa_cli/react-composable

A powerful and easy-to-use package providing composable utilities for React projects. This library is designed to simplify and enhance your React development workflow, and it is fully compatible with the latest versions of React and Next.js.

Installation

To install the package, use the following command:

npm install @msa_cli/react-composable

Or, if you prefer Yarn:

yarn add @msa_cli/react-composable

Overview

The @msa_cli/react-composable package offers a set of helpful functions designed to streamline your project needs. These functions follow composable patterns, enabling flexibility and reusability throughout your application. Whether you're working on a standard React project or leveraging the latest version of Next.js, this library is built to integrate seamlessly.

Key Features

Composable Utilities: Ready-to-use functions that follow React’s compositional paradigm.
Project Agnostic: Works well in both React and Next.js environments.
Simple API: Easy-to-understand and implement functions.
Documentation: Comprehensive documentation available at React Composable Documentation.

Usage

Import the functions you need and use them directly in your components:

Example:

'use client'

import { Input } from '@/components/ui/input'
import { useDebounce } from '@msa_cli/react-composable'

export default function Debounce() {
  const [value, debouncedValue, setValue] = useDebounce('', 1000)

  return (
    <div className="flex flex-col gap-4">
      <Input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="border p-2 rounded"
        placeholder="Type something..."
      />
      <div className="flex flex-col gap-2">
        <div>Current value: {value}</div>
        <div>Debounced value: {debouncedValue}</div>
      </div>
      <div className="mt-5">How to use:</div>
    </div>
  )
}

Refer to the documentation for detailed examples and API references.