Skip to content

CarloSaccone/react-bootstrap-input

Repository files navigation

react-bootstrap-input

This package provides a simple yet powerful input component with the following features:

  • pattern-based validation
  • form-group validation
  • data-binding
  • input-masks and formatting

GitHub code

Working demo

basics

  1. Install and include:
npm install react-bootstrap-input

import { SimpleInput } from 'react-bootstrap-input';
  1. Create a host component representing your form (a filter form in this example), then place in the render function a few input fields:

HINT: predefined patterns are available for numbers and currency:

type="number|currency|percent|percent1" currency="$"

<SimpleInput
    formObj={filter}
    name="email"
    placeholder="Your email"
    onChange={filterChange}
    required
    validated
    pattern={'^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$'}
    errorMessage="Please provide a valid email address"
/>
  1. Provide the data-variable representing your form and the change function:
const [filter, setfilter] = useState({});
const filterChange = updatedItem => {
    setfilter(updatedItem);
};
  1. add the required styles (jss version will be published soon!)
<link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossOrigin="anonymous"
/>
<link
    rel="stylesheet"
    href="https://carlosaccone.github.io/react-bootstrap-input/main.css"
    crossOrigin="anonymous"
/>

  1. use validation (optional)

each validated field sends updates (onSet/onChange) in order to tell if the provided value is valid or not, adding the errormessage (you can use it to notify users). In order to get these updates you must provide the onValidationChange function and combine it with a useReducer in order to get validation updates in an easy way

import { SimpleInput, validationReducer } from 'react-bootstrap-input';

const [validation, setvalidation] = useReducer(validationReducer, {});

const validationChange = field => {
    setvalidation(field);
};

 <SimpleInput
    formObj={form}
    name="name"
    placeholder="Your name"
    onChange={filterChange}
    onValidationChange={validationChange}
    required
    validated
/>

Enjoy!

About

simple yet powerful bootstrap text-input component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published