Your task is to create a Number Input component in React. This component should include an input field and two buttons: one for incrementing the value in the input field and one for decrementing it.
- State Management: The component should be able to maintain and update its state based on user interactions.
- Step Value: The component should accept a
stepprop that controls the amount by which the value in the input field is incremented or decremented. - Props: The component should accept props to control its behavior, such as
min,max, andstepvalues. - Accessibility: The component should be accessible to all users, including those using screen readers and other assistive technologies.
- Styling: The component should be styled in a way that is visually appealing.
const Demo: React.FC = () => {
const [stateValue, setStateValue] = useState(0);
return (
<NumberInput
label="Number"
min={0}
max={10}
value={stateValue}
onValueChange={(newVal) => {
setStateValue(newVal);
}}
/>
);
};This project was scaffolded with Vite. To run the project, run the following commands:
yarn install
yarn dev