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