bootstrap-input-react

Bootstrap (or not) inputs for react that manage themselves.

Installation.

npm install bootstrap-input-react

Details.

A single component that creates a bootstrap 4 input of one of the following common input types:

input
checkbox
select
radio
text area

Each input component does all the work for you. Handling input and setting state. A minimum number of properties are required:

parent - the parent component maintaining the state for the input, usually this
name - the name of the component and the state value.

Example:

import BootstrapInput from "bootstrap-input-react";

export class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numeric: 100,
        };
    }

    render() {
        return (<div> <BootstrapInput parent={this} name="numeric"/></div>)
    }
}

Creates a text input using the state property of numeric with the initial value of 100 . It will then be available as:

   this.state.numeric

Refer to example.jsx in the package for more examples.

Input types.

Use the type property to set the input type. Supported:

text
number
tel
email
checkbox
select
textarea

Basically any other HTML input type can be used. Select, checkbox and textarea have specific style and label handling. Any other property will be passed along to the HTML input element.

Select

To create a select input, set the type="select", and provide a list of the select options as either a simple list or a list of objects with label and value. As follows:

<BootstrapInput parent={this} name="select" type="select" label="select" 
    options={[{label: 'a',value:1}, {label: 'b',value: 2}, {label: 'c',value: 3}]}
/>
<BootstrapInput parent={this} name="selectSimple" type="select" label="select simple" 
    options={[4,5,6]}
/>

Radio button group

Very similar to the select input. Use type="radio" and provide a list of the radio options as either a simple list or a list of objects with label and value. As follows:

    <BootstrapInput parent={this} name="radio" type="radio" label={"radio"} options={[{label: 'a',value:1}, {label: 'b',value: 2}, {label: 'c',value: 3}]}/>

The state value, provided as name, will have the value of the selected radio option.

Checkbox

A checkbox control is the same as an input excepting the state value will be true or false. Example:

    <BootstrapInput parent={this} name="checkbox" type="checkbox" label="Checkbox"/>

Labels

Labels are connected to each input by a random number id if not supplied. For checkboxes and radios the label is located to the right. For all others it is on the left. This default can be overridden by setting the labelPos prop to either "left" or "right".

Only when you add a label prop does the full Bootstrap <div> input styling get applied. Without a label prop the <label> and div elements are not added.

Props.

name		default	description
parent	required		the parent element where state should be managed
name	required		the name of the state property. Also becomes the input name [name=name]
type	optional	text	input type, one of: text, number, select, textarea, radio
value	optional	null	initial value of the input. If not supplied state is initialized on first onChange.
label	optional		label name to attach to input
labelPos	optional		left or right as required
onChange	optional		method to call after change. function(event, value)
options	required for radio and select		list of label and values for the options
inputClassName	optional	bootstrap class dependent on type	class name for input
inlineClassName	optional	form-check-inline	class name for surrounding div of input and textarea
labelClassName	optional	form-check-label	class name for surrounding label

Requirements.

To properly style the inputs you should have bootstrap 4 CSS included somewhere

Release history

1.1.5 - 6-Jun-2020 now working corectly as a package
1.1.6 - 6-Jun-2020 fixed bug when checkbox value not initially set
1.1.7 - 7-Jun-2020 added control for label position. Added missing htmlFor setup.
1.1.8 - 8-Jun-2020 remove div and label when no label.
1.1.9 - 8-Jun-2020 remove failed auto conversion to numeric.
1.2.0 - 10-Oct-2021 update vulns