react-input-customizer

React Input Glow Component

The React Input Glow Component provides a flexible and customizable input field with floating labels. It is designed to be easy to use and highly configurable.

Installation

You can install the React Glow Input Component using npm or yarn:

npm install react-input-customizer

or

yarn add react-input-customizer

Usage

To use the React Input Glow Component, you should import the FloatingInputProps interface from 'react' and use it to define the props for your input field. Here's an example of how to use it:

import React from 'react';
import InputBox from 'react-input-customizer';

const MyForm = () => {
  const handleChange = (value) => {
    // Handle input value change
  };

  return (
    <div>
      <h2>Example Form</h2>
      <label>Name:</label>
      <InputBox
        name="name"
        label="Name"
        placeholder="Enter your name"
        onChange={handleChange}
        // Add other props as needed
      />
      {/* Add more input fields */}
    </div>
  );
};

export default MyForm;

In this example, we import the FloatingInputProps interface and use it to define the props for our input field. We can customize various aspects of the input field, such as the label, placeholder, and event handlers.

Feel free to explore the available props in the FloatingInputProps interface and adjust them to fit your specific use case. The React Input Glow Component is highly customizable and can be integrated into your forms with ease.

Storybook Example

You can also explore more examples in the React Input Glow Component Storybook.

Props Table

Here's a table of available props for the FloatingInputProps interface, arranged alphabetically:

Prop	Type	Description
borderColor	string	The border color of the input field.
borderRadius	string	The border radius for the input container.
borderWidth	string	The border width of the input field.
className	string	Additional CSS class for the input container.
disabled	boolean	Whether the input is disabled.
errorLabelTextColor	string	The text color for the error label.
errorText	string	The error text to display.
errorTextClassName	string	Additional CSS class for the error message.
errorTextColor	string	The text color for the error message.
height	string	The height of the input field.
icon	React.ReactNode	An icon component to display within the input.
iconPosition	'left' | 'right'	The position of an icon (if provided).
inputClassName	string	Additional CSS class for the input field.
isFloating	boolean	Whether the label should float on focus.
label	string	The label for the input field.
labelBackground	string	The background color of the label.
labelClassName	string	Additional CSS class for the label element.
labelPosition	'inline' | 'outside' | 'inside'	The position of the label.
labelTextColor	string	The text color of the label.
labelClassName	string	Additional CSS class for the legend
name	string	The name attribute for the input field.
placeholder	string	The placeholder text for the input field.
primaryColor	string	The primary color of the input field.
showIcon	boolean	An icon boolean to display within the input.
required	boolean	Whether the input is required.
textColor	string	The text color of the input field.
toggleOffIcon	React.ReactNode	An icon to use when the input is toggled off (e.g., for passwords).
toggleOnIcon	React.ReactNode	An icon to use when the input is toggled on (e.g., for passwords).
type	string	The type of the input field (e.g., "text", "password").
width	string	The width of the input field.