Automate Component Creation with React & React Native Component Generator

Introduction

As a developer, setting up boilerplate code for React and React Native components can be time-consuming. To simplify this process, I created React & React Native Component Generator, a web application that automates component creation based on user-defined state variables and API endpoints. This tool is designed to enhance productivity by reducing repetitive coding tasks.

Features

1. Component Name Input

• Easily specify the name of the component to be generated.

2. State Variables

• Add, edit, and remove state variables dynamically.
• Support for validation rules such as required fields, min/max values, regex patterns, etc.

3. API Endpoints

• Define API endpoints with methods (GET, POST, PUT, DELETE) and URLs.
• Generate API handling boilerplate automatically.

4. Input Fields

• Optionally generate input fields for defined state variables.

5. Validation Rules

• Set validation rules like required fields, min/max length, min/max value, and regex patterns.

6. Code Preview

• View the generated code in real time before using it.

7. Copy to Clipboard

• Quickly copy the generated component code with a single click.

Technologies Used

• React: For building the web application.
• React Native: For generating native components.
• Axios: To facilitate API requests.
• React Syntax Highlighter: For code preview with syntax highlighting.
• Lucide React: For incorporating UI icons.

Installation

Clone the repository:

git clone https://github.com/babarbilal56/react-or-reactnative-component-generator.git
cd react-or-reactnative-component-generator

Install dependencies:

npm install

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to use the application.

Usage Guide

1. Enter the desired component name.
2. Click “Add Variable” to define state variables (e.g., string, number, boolean).
3. Optionally, set validation rules for each variable.
4. Click “Add Endpoint” to specify API details.
5. Toggle “Generate Input Fields” to include input fields in the component.
6. Toggle “Generate for React Native” to create a React Native component.
7. Click “Generate Component” to auto-generate the code.
8. Copy the code for immediate use.

Contributing

Contributions are welcome! Feel free to fork the repository, create issues, or submit pull requests to improve the project.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

A huge thanks to the open-source community for providing the incredible libraries and tools that made this project possible.

GitHub Repository

React & React Native Component Generator

Follow my GitHub for more projects

Babar Bilal

Demo

Live Demo