react-bootstrap-touchspin v1.6.0

React-Bootstrap-TouchSpin

No need for Jquery

Getting Started

Installation

npm i react-bootstrap-touchspin

Usage

Import Bootstrap style to the project

import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap-icons/font/bootstrap-icons.css";
import "react-bootstrap-touchspin/lib/dist/styles.css";

Bootstrap 4.6.0 has already installed.

The component can be used in following ways

1-Simple

const App = () => {
  const myCounterHandler = (counter: number) => {
    console.log(counter);
  };
  return (
    <React.Fragment>
      <TouchSpin counterHandler={myCounterHandler} />
    </React.Fragment>
  );
};

2-Sign On the left

<TouchSpin
  sign={'#'}
  signAlignment={Alignment.Left}
  step={1}
  initValue={0}
  max={100}
  min={-20}
  decimals={1}
  counterHandler={myCounterHandler}
/>

3-Sign On the right

<TouchSpin
  sign={'#'}
  signAlignment={Alignment.Right}
  step={1}
  initValue={0}
  max={5000}
  min={0}
  decimals={1}
  counterHandler={myCounterHandler}
/>

4-Vertical buttons

<TouchSpin
 step={1.02}
 decimals={1}
 initValue={0}
 counterHandler={myCounterHandler}
 verticalButtons={true}
 />