The useCounter is a custom hook provided by the Rooks package for React. It is a counter hook that helps build a simple counter easily and quickly.
Syntax:
useCounter( initialValue )
Parameters
- initialValue: It is of number type that describes the initial value.
Return Value:
- counter: It is of type object which contains a value, increment, decrement, incrementBy, decrementBy, and reset.
Let’s understand the use of this hook by a simple-counter example.
Modules Required:
- npm
- create-react-application
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-application demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Step 3: Install Rooks from npm.
npm i rooks
Open the src folder and delete the following files:
- logo.svg
- setupTests.js
- App.test.js
- index.css
- reportWebVitals.js
Project Structure: The project should look like this:
Â
Example: The below example will illustrate the use of the useCounter hook in ReactJS:
index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; Â Â const root = ReactDOM.createRoot(document.getElementById('root')); root.render( Â Â Â Â <React.StrictMode> Â Â Â Â Â Â Â Â <App /> Â Â Â Â </React.StrictMode> ); |
App.js
import React from 'react'; import "./App.css"; import { useCounter } from 'rooks';   const App = () => {     const { value, increment, decrement, incrementBy,         decrementBy, reset } = useCounter(0);     return (         <div>             <p> Counter</p>             <p> <span>Current value </span>is {value}</p>             <button onClick={increment}>                 Increment</button><br /><br />             <button onClick={decrement}>                 Decrement</button><br /><br />             <button onClick={() => incrementBy(2)}>                 Increase by 2</button><br /><br />             <button onClick={() => decrementBy(2)}>                 Decrease by 2</button><br /><br />             <button onClick={reset}>reset</button>         </div>     ) }   export default App |
App.css
/* Write CSS Here */p { Â Â Â Â margin: 20px; Â Â Â Â font-size: 30px; Â Â Â Â color: rebeccapurple; Â Â Â Â font-weight: bold; } span { Â Â Â Â color: red; } Â Â button { Â Â Â Â margin: 20px; Â Â Â Â width: 300px; Â Â Â Â font-size: 20px; Â Â Â Â background: rgb(190, 233, 190); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Â
