This project is a collection of reusable utility components built in React and Typescript. It aims to provide a set of any React application to enhance functionality and improve development efficiency.
website - https://react-utility-comp.netlify.app/
- Toast Notification
- Nested Folder System like VS Code
It is a lightweight toast component can be used to display notification or messages. It uses stack to store multiple toast automatically disappear after mention time or remove by pressing remove icon.
- Success
- Error
- Info
- Warning
- Top-left
- Top-Center
- Top-Right
- Bottom-left
- Bottom-Center
- Bottom-Right
First, select position then, select type
It is a folder system just like a VS Code Folder Structure with following features :
- Create Files and Folders
- Remove Files and Folders
- Sorted Files and Folders Structure
- Rename Files and Folders
- Delete Files and Folders
- Expand Folder
- Collapse All Folder with Single Click
Running the project locally with vite
Ensures you have Node.js and Git installed on your machine. You will also need either npm or yarn
1.Clone the Repository
Open your terminal and navigate to the directory where you want to clone the project:
git clone https://github.com/probhask/utility_component.git2. Install Dependencies
npm install
or
yarn install3. Run the Development Server
npm run dev
or
yarn devThis development server will start, and you should see output indicating the server is running.
4. Open the Application
Open your browser and navigate to the local URL provided by Vite development server to view React Application
This project uses VITEST for testing the components. Vitest is a fast and efficient testing framework, similar to Jest, but optimized to modern JavaScript framework like Vite
5. Run Test
npm run test
or
yarn test
Vitest will automatically detect and run all test files located in the **test** directory or files ending with .test.tsx.