React-crud-generator NPM

Installation

npm i react-crud-generator --save-dev OR yarn add react-crud-generator --save-dev

Usage with example project

You can also read this guide: https://medium.com/@bans.cowboy/rhino-react-crud-generator-complete-guide-bfc5e71e812a

For easier understanding how can you use this package, you can download the example project from here. https://github.com/WingsDevelopment/rhino-consumer After downloading the project, you can run it by following the instructions in the README.md file.

Usage

After adding config files you can list all the available commands by running: npx rhino -h

First you can add all dependency components implementation by running the following command: npx rhino -i

Then you can generate the CRUD by running the following command (if you copied json schema from example this exact command will work, if not you might need to change your schema model name): npx rhino -f tag -c Tag -u Tag -d Tag -a Tag

Imports inside of components and prittier doesn't come out of the box for at this moment, so you need to add import on save to vscode settings.json file: or import manually.

Config

Add rhinoConfig.json and rhinoOpenApiSchema.json files to your root directory More about how to config those files can after about.

About

Rhino is a code generator for React projects. It generates a CRUD for a given feature. Rhino is currently very opiniated with data fetching and state management technologies, it uses axios and react-query for data fetching and state management.

Folder structure and architecture is semi opiniated, but also very configurable. By default this is the folder structure:

This folder structure can be configured! if you take a look at the rhinoConfig.json file you will see that you can change the folder structure. notice this part of configuration:

by changing the values you can change the folder structure.

Dependencies

Rhino won't work without the following dependencies: axios react-query react-router-dom typescript react-hook-form

Also you will need to provide few components, wrappers for the generated components. You can eaither implement it yourself, or generate it by running init command.

Coming soon: Configurable renaming of the components. Configurable file extensions, enabling jsx & js files instead of tsx & ts

Config rhinoOpenApiSchema

rhinoOpenApiSchema configuration is very straightforward. copy the open api schema from the swagger editor and paste it in rhinoOpenApiSchema.json

swagger open api schema example: https://petstore.swagger.io/v2/swagger.json for quick test, copy json from this link and paste it in rhinoOpenApiSchema.json copy json from under Config rhinoConfig section into rhinoConfig.json and run the command: npx rhino -f anyName -c Tag