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

---

Parameter	DefaultValue	Optional	Description
signAlignment	Left if sign defined	*	Alignment for sign
sign	-	*	Sing to show on left/right of the touchspin
initValue	0	*	Initial value
step	1	*	Incremental/Decremental step on up/down change
min	0	*	Minimum value
max	200000	*	Maximum value
decimals	0	*	Number of decimal points
counterHandler	-	-	Handler to get counter value
verticalButtons	false	*	Enables vertical up/down buttons
verticalUpClass	"bi bi-caret-up-fill"	*	Bootstrap icon's class name for up button if vertical buttons mode enabled
verticalDownClass	"bi bi-caret-down-fill"	*	Bootstrap icon's class name for down button if vertical buttons mode enabled
iconSize	11px	*	Bootstrap icon's size
parentStyle	-	*	Style for the parent container
inputStyle	-	*	Input's style