@thebabouche/inputs

The @thebabouche/inputs package offers customizable input components for React, focusing on flexibility and reusability. The first component in this library, NumberInput, allows for easy integration of a numeric field with custom control features through icons for incrementing and decrementing the value.

Installation

To install the component in your project, use npm or yarn:

npm install @thebabouche/inputs
# or
yarn add @thebabouche/inputs

Usage

Here's how to use the NumberInput component in your React application:

import React from "react";
import { NumberInput } from "@thebabouche/inputs";

const App = () => {
  const [value, setValue] = React.useState(0);

  return (
    <NumberInput
      id="my-number-input"
      value={value}
      placeholder="Enter a number"
      step={1}
      min={0}
      max={10}
      onChange={(newValue) => setValue(newValue)}
      iconUp={<YourIncrementIcon />}
      iconDown={<YourDecrementIcon />}
      iconWrapper={{ height: "20px", width: "20px" }}
    />
  );
};

export default App;

Replace <YourIncrementIcon /> and <YourDecrementIcon /> with your custom icons for the increment and decrement buttons.

Props

The NumberInput component accepts the following props for full customization:

• id (string): A unique identifier for the input component.
• value (number): The current value of the input.
• placeholder (string): Text displayed when the input is empty.
• disabled (boolean): Disables the input if true.
• step (number): The amount of change applied by the increment and decrement actions.
• min (number): The minimum value accepted.
• max (number): The maximum value accepted.
• onChange ((value:number) => void): Function called with the new value when it changes.
• iconUp (React.ReactNode): React component or element used for the increment icon.
• iconDown (React.ReactNode): React component or element used for the decrement icon.
• iconWrapper (IconWrapperProps): Props to style the icon wrappers, including height and width which can be numerical values or strings (including CSS units).
• inputStyling (React.CSSProperties): Props to style input;
• inputWrapperStyling (React.CSSProperties): Props to style the wrapper of the input

Live Demo

Experience @thebabouche/inputs in action! We have prepared a live demo on CodeSandbox that showcases the NumberInput component along with various examples to demonstrate its capabilities and flexibility.

Click the image above to open the CodeSandbox demo. Feel free to play around with the component properties to see how it behaves. This live example should help you get a better understanding of how @thebabouche/inputs can fit into your project.