React-bootstrap-custom-inputs NPM

React Bootstrap Custom Inputs

A library providing great looking input elements for projects using React with Bootstrap.

Interactive sandbox(Storybook) to test out the components

react-bci.vercel.app

Usage examples:

With Hooks

import { useState } from 'react';
import DatePicker from 'react-bootstrap-custom-inputs';

function App() {
  const [date, setDate] = useState('2021-01-31');

  const handleDate = useCallback(({ target: { value } }) => setDate(value), []);

  return (
    <div className="container-fluid vh-100">
      <div className="row h-75 justify-content-center align-items-center">
        <DatePicker
          onChange={handleDate}
          value={date}
          label="Date"
          required
          className="col-4"
        />
      </div>
    </div>
  );
}

export default App;

With Classes

import React, { Component } from 'react';
import { DatePicker } from 'react-bootstrap-custom-inputs';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      date: '2021-01-31',
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const { name, value } = e.target;

    this.setState({
      [name]: value,
    });
  }

  render() {
    const { date } = this.state;

    return (
      <div className="container-fluid vh-100">
        <div className="row h-75 justify-content-center align-items-center">
          <DatePicker
            onChange={this.handleChange}
            value={date}
            name="date"
            label="Date"
            required
            className="col-4"
          />
        </div>
      </div>
    );
  }
}

export default App;

Autocomplete Props:

Name	Required	Description	Default
onChange	true	handler `function`	-
name	true	`string` representing State property	-
list	true	`array` of `objects` with `key`(unique string), `value`(string), `title`(optional string), `isImportant`(optional boolean) to display a star icon, `isBackground`(optional boolean) to hide on open, `children`(support for nested list of the same format) properties	-
label	false	`string` to enable interaction with the input through it's label	-
value	false	`string` or `string[]` matching `key` property of `list` objects	-
className	false	`string` consisting of classes to apply to the input	-
language	false	`string` currently supported values `en`, `lv`	'en'
debounce	false	`number` representing debounce in milliseconds	500ms
autoComplete	false	'on' or 'off'	'off'
multiselect	false	`bool` to enable the ability of selecting multiple items	false
multiselectPreview	false	`number` to display values if selected count is equal or less, `'default'` to display `'Selected #'`, `'value'` to always display value	'default'
valid	false	`bool` to override default `required` with your own definition (i.e. `valid === true` when at least 3 items are selected)	-
required	false	`bool` to enable Bootstrap `is-valid/is-invalid` validations	false
disableDeselect	false	`bool === true` disables ability to deselect when `multiselect === false`	false
disabled	false	`bool`	false

DatePicker Props:

Name	Required	Description	Default
onChange	true	handler `function`	-
name	true	`string` representing State property	-
label	false	`string` to enable interaction with the input through it's label	-
value	false	`string` or `string[]` in RFC2822 or ISO format	'DD.MM.YYYY'
className	false	`string` consisting of classes to apply to the input	-
language	false	`string` currently supported values `en`, `lv`	'en'
highlightDate	false	`string` in RFC2822 or ISO format	''
highlightColor	false	`string` describing color in hexadecimal	''
asIcon	false	`bool` to render an icon depicting a calendar instead of text input	false
alignment	false	`string` controlling expanded calendar alignment `left`, `right`	'left'
multiselect	false	`bool`	false
valid	false	`bool`	-
required	false	`bool`	false
disabled	false	`bool`	false
disableDeselect	false	`bool === true` disables ability to deselect when `multiselect === false`	false

TimePicker Props:

Name	Required	Description	Default
onChange	true	handler `function`	-
name	true	`string` representing State property	-
label	false	`string` to enable interaction with the input through it's label	-
value	false	`string` in the format `HH:mm`	'--:--'
className	false	`string`	-
valid	false	`bool`	-
required	false	`bool`	false
disabled	false	`bool`	false
disableDeselect	false	`bool === true` disables ability to deselect when `multiselect === false`	false

TextInput Props:

Name	Required	Description	Default
onChange	true	handler `function`	-
name	true	`string` representing State property	-
label	false	`string` to enable interaction with the input through it's label	-
value	false	`string`	''
debounce	false	`number` representing debounce in milliseconds	500ms
className	false	`string`	-
valid	false	`bool`	-
required	false	`bool`	false
disabled	false	`bool`	false