This repository contains various React components along with their documentation. Below is a list of all components available in this project. Click on any component name to jump to its documentation.
A React component that renders a folder and file structure similar to a file explorer. The folder structure is dynamically rendered based on a configuration file, and folders can be expanded or collapsed.
Features Recursively renders folders and files from a given configuration. Displays a "+" icon for collapsed folders and a "-" icon for expanded folders. Allows for easy customization of folder and file structures using a configuration object. Supports modern React with modular CSS styling.
This project provides a React component that visualizes a folder structure similar to what you might see in a file explorer. The component can render both folders and files, allowing for an expandable and collapsible view of the directory.
- Recursive rendering of folders and files
- Expandable and collapsible folders
- Dynamic rendering based on configuration data
To use this component in your React application, follow these steps:
- Clone the repository:
git clone https://github.com/your-username/react-recursive-folder.git
cd react-recursive-folder
- Install dependencies:
Ensure you have Node.js installed. Then run:
npm install
- Start the development server:
In the project directory, you can run:
yarn start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
To use the Folder
component in your application:
- Import the
Folder
component and the configuration data in your main application file (e.g.,App.tsx
):
import React from "react";
import Folder from "./components/Folder/Folder";
import { folderConfig } from "./components/Folder/folder.config";
import styles from "./components/Folder/Folder.module.css";
function App() {
return (
<div div className={styles.folderContainer}>
<Folder config={folderConfig} />
</div>
);
}
export default App;
- Ensure your
folder.config.ts
file contains the configuration data for your folder structure.
The folder structure is defined using a TypeScript interface FolderConfigProps
. Hereβs an example configuration:
export interface FolderConfigProps {
type: "folder" | "file";
name: string;
children: FolderConfigProps[];
}
export const folderConfig: FolderConfigProps[] = [
{
type: "folder",
name: "node_modules",
children: [
{
type: "folder",
name: "@types",
children: [
{
type: "file",
name: "react.d.ts",
children: [],
},
],
},
{
type: "folder",
name: "react",
children: [
{
type: "file",
name: "index.d.ts",
children: [],
},
],
},
],
},
{
type: "file",
name: "README.md",
children: [],
},
];
Styling: Modify Folder.module.css to customize the appearance of folders, files, and icons.
Expand/Collapse icons (+ and -) can be replaced with custom icons by editing the Folder.tsx file. Behavior: Add additional features (e.g., file click handlers) by extending the Folder or FolderItem components.
The Folder
component will render folders with a "+" icon when collapsed and a "-" icon when expanded. Files will be displayed without any icons.
Here's how your project directory should look:
/react-folder-structure
βββ /public
β βββ index.html
βββ /src
β βββ /components
β β βββ /Folder
β β βββ Folder.tsx
β β βββ folder.config.ts
β β βββ Folder.module.css
β βββ App.tsx
β βββ index.tsx
βββ package.json
βββ README.md
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.

The TikTokTie component provides functionality related to TikTokToe-style features. (Provide a brief description of what this component does.)
- You can play the game with two people initally the x will play first.
- Once X win the game its should be print x winner and then you can reset the game.
- Else O win the game
To use the TikTokTie component, follow these steps:
- Import the
TikTokTie
component in your application:
I have imported inside my router file.
<Route path="/ticTacToe" element={<TicTacToe />} />
Here is screenshot of tictactoe game

The OTP Component allows users to input a one-time password (OTP) with a specified length. It automatically moves focus between input fields as users type or delete characters.
length
(number): The number of input fields for the OTP.onComplete
(function): A callback function that is called when the user completes entering the OTP.seperator
(string, optional): A string that will be displayed between each input field.inputClass
(string, optional): Custom CSS class for individual input fields.inputContainerClass
(string, optional): Custom CSS class for the container holding all input fields.
To use the OTP component, follow these steps:
-
Import the
OtpComponent
in your application: -
Use the
OtpComponent
in your application:
function App() {
const handleOtpComplete = (otp) => {
console.log("OTP entered:", otp);
};
return (
<div>
<OtpComponent length={6} onComplete={handleOtpComplete} />
</div>
);
}
Hereβs an example of how to use the OTP component with custom classes:
<OtpComponent
length={6}
onComplete={(otp) => console.log("OTP:", otp)}
seperator="-"
inputClass="custom-input"
inputContainerClass="custom-container"
/>


Contributions are welcome! Please feel free to submit issues or pull requests.
- Fork the repository.
- Create your feature branch (
git checkout -b feature/AmazingFeature
). - Commit your changes (
git commit -m 'Add some AmazingFeature'
). - Push to the branch (
git push origin feature/AmazingFeature
). - Open a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.