No UI Slider

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

Choices.js

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

Datepicker

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 
    />
  )
}

imask Input maps

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'
    />
  )
}
e.g "999-99-999-9999-9"
999 99 999 9999 9
999/99/999/9999/9
192.168.110.310
99-123456
+1-907-555-0165
999,999,999.99
1980-06-22

Your company © 2022

Version 1.2.0