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:

$3

``
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 (

onChange={handleDate}
value={date}
label="Date"
required
className="col-4"
/>

);
}

export default App;
`


$3


`
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 (

onChange={this.handleChange}
value={date}
name="date"
label="Date"
required
className="col-4"
/>

);
}
}

export default App;
`

$3


| 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 |

 

$3

| 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 |

 

$3

| 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 |

 

$3

| 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 |