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

| Flag | Description | | ---------------------------- | -------------------------------------------------- | | -n, --name <type> | Name of the component. Defaults to component name. | | -t, --component-type <type> | Type of component to generate. | | -ts, --typescript | Use Typescript. Defaults to false. | | -h, --help | Display help for command. |

Valid Component Types

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

| Component Types | Description | | --------------- | --------------------------------------------------------- | | NavBar | Generates a navbar | | SideBar | Generates a sidebar | | DropUp | Generates a dropup component that pops up a menu on hover |

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.