react-essential-ui v0.0.6

react-essential-ui

A react component library to quickly spin up good looking UI that is highly customizable. Ideal for projects requiring quick iterations like hackathons, building MVPs or prototypes.

It generates components (.ts/.js/.css files) directly into your work directory which can be modified completely, thereby eliminating the need to learn a new library from scratch.

Install

using npm: npm install -D react-essential-ui

using yarn: yarn add -D react-essential-ui

Usage

First, create a essential.config.json file containing the following keys:

- componentDir: String -> The directory to generate the components into.

- stylesDir: String -> The directory to generate the styles into.

Example:

{
	"componentDir": "./src/components/",
	"stylesDir": "./src/styles/"
}

Make use of npx react-essential-ui --help to list the valid flags.

Example Usage

npx react-essential-ui --component-type NavBar --name MyNavBar --typescript

This creates a navbar component named MyNavBar.tsx in the componentDir folder and a MyNavBar.module.css in the stylesDir folder.

Flags

Valid Component Types

These are components that can be generated right now. More components are planned to be added in the future.

Note: The component types are case sensitive

Roadmap

• Add more components

• Add a variant flag ( -v, --variant ) to add customisations. For example

  npx react-essential-ui -t NavBar -v sticky -ts -name MyStickyNavbar

  This should generate a navbar component that sticks to the top of the screen.

• Add theming support

• Add a default typescript field in the essential.config.json

Contribute

• Clone the repository
• Install dependencies with yarn or npm install
• Use the dev script to start in dev mode

PRs and issues are welcome.