noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.
Read more about this component at https://refreshless.com/nouislider/ & react wrapper https://github.com/mmarkelov/react-nouislider.
import Nouislider from "nouislider-react"
export default function page(props) {
return(
<div className="nouislider text-primary">
<Nouislider
start={[20, 80]}
snap={false}
connect={true}
range={{
min: 0,
max: 100,
}}
/>
</div>
)
}A vanilla, lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
Read more about Choices.js at https://github.com/jshjohnson/Choices.
Theme has built in React wrapper which you can find in src/components/Choices.
import { ChoicesSelect, Choices } from "../components/Choices"
export default function page(props) {
return(
<div>
<ChoicesSelect
options={[
{
value: "mustard",
label: "Mustard",
},
{
value: "ketchup",
label: "Ketchup",
},
{
value: "relish",
label: "Relish",
},
]}
/>
<Choices
defaultValue={["preset-1", "preset-2"]}
placeholder="Enter something"
/>
</div>
)
}VanillaJS Datepicker is a vanilla JavaScript remake of bootstrap-datepicker.
Read more about VanillaJS Datepicker at https://github.com/mymth/vanillajs-datepicker.
Theme has built in React wrapper which you can find in src/components/Datepicker.
import Datepicker from "../components/Datepicker"
export default function page(props) {
return(
<Datepicker
defaultValue="10/20/2017"
autohide={true}
maxNumberOfDates={3}
range
/>
)
}Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
Read more about imask at https://imask.js.org/ & react wrapper https://github.com/uNmAnNeR/imaskjs/tree/master/packages/react-imask.
import { IMaskInput } from "react-imask"
export default function page(props) {
return(
<IMaskInput
mask={Number}
radix="."
value="123"
unmask={true} // true|false|'typed'
inputRef={el => this.input = el} // access to nested input
// DO NOT USE onChange TO HANDLE CHANGES!
// USE onAccept INSTEAD
onAccept={
// depending on prop above first argument is
// 'value' if 'unmask=false',
// 'unmaskedValue' if 'unmask=true',
// 'typedValue' if 'unmask="typed"'
(value, mask) => console.log(value)
}
// ...and more mask props in a guide
// input props also available
placeholder='Enter number here'
/>
)
}