npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

reacli

v1.6.7

Published

A simple and straightforward React boilerplate CLI

Downloads

2

Readme

npm version Build Status

This is a React CLI that helps with boilerplate.


See the landing website here

We describe briefly the features of the Reacli tool here. For more details on how the tool works and how to use the different options, please refer to the landing website https://reacli.github.io/


Basic usage


$ npx reacli -h

  ____                 _ _ 
 |  _ \ ___  __ _  ___| (_)
 | |_) / _ \/ _` |/ __| | |
 |  _ <  __/ (_| | (__| | |
 |_| \_\___|\__,_|\___|_|_|
                           
Usage: reacli <command> [path(s)] [options]

React CLI to create things really fast

Options:
  -V, --version             output the version number
  -f, --flow                add flow to the template
  --scss                    use SCSS instead of classic css
  --redux                   add Redux to the template
  -i, --ignore-config-file  ignore the '.reacli' optional configuration file
  --extension [value]       the file extension to use for the templates ('js' or 'jsx')
  -h, --help                output usage information

Commands:
  component [path(s)] [options]
  hook [path(s)] [options]

Examples:
  Interactive CLI:
    $ reacli
  Create a component using Redux and Scss:
    $ reacli component ./my-path/my-component --redux --scss
  Create two hooks:
    $ reacli hook ./my-hook1 ./my-hook-2

Table of contents


Installation

You can use Reacli either as a global package, or download it and use it whenever it's needed.

We describe here how to install it globally in different ways, depending on your package manager.

Using npm

npm install -g reacli

Using yarn

yarn global add reacli

Usage

How to use Reacli?

Case 1: Reacli is installed globally

You can directly run the reacli command from a terminal such as:

reacli component path/to/my/component

Case 2: you want to download it when it is needed with npx

npx reacli component path/to/my/component

Interactive CLI

To facilitate the use of Reacli, we decided to create an interactive CLI, asking you some questions guiding you to create what you want.

To use it, just run:

reacli

Interactive CLI

CLI features

You can also use Reacli to directly configure what you want and save some time.

Today, Reacli enables to create:

  • Components
  • Hooks

Component creation

Reacli's main feature is to create easily new components. To create a new component with the default configuration:

reacli component ./my-super-component

It will generate a structure like:

.
└── my-super-component
    ├── components
    |   ├── MySuperComponent.jsx
    |   ├── MySuperComponent.css
    |   └── MySuperComponentContainer.jsx
    └── index.js

For more details about why we chose this configuration as a default one, please see here.

Options

Reacli enables to customize your components creation thanks to several options. You can combine several options.

  • -f or --flow option adds Flow to your generated component
  • --scss to use a SCSS style file instead of the default CSS one
  • --redux option adds a React-Redux default configuration to your generated component
  • -i or --ignore-config-file to ignore the .reacli configuration file if one is found and use default options or the ones given at runtime to the CLI
  • --extension [value] where value is either "js" or "jsx" to configure the file extension of the generated component files
Create several components at once

To create several components in one single command, just type several paths such as:

reacli component ./my-super-component1 ./my-super-component2

Hook creation

Reacli also enables to create React hooks. The functioning is quite similar to components creation. To create a hook with the default configuration:

reacli hook ./my-super-hook

It will generate a structure like:

.
└── my-super-hook
    ├── hooks
    |   ├── MySuperHook.jsx
    |   └── MySuperHook.css
    └── index.js
Options

You can configure some options to customize the way Reacli creates your hook:

  • --scss to use a SCSS style file instead of the default CSS one
  • --extension [value] where value is either "js" or "jsx" to configure the file extension of the generated hook files
  • -i or --ignore-config-file to ignore the .reacli configuration file if one is found and use default options or the ones given at runtime to the CLI
Create several hooks at once

To create several hooks in one single command, just type several paths such as:

reacli hook ./my-super-hook1 ./my-super-hook2

Global configuration

You might want to use several times Reacli in your project to create many new components. It might be annoying having to type the different options you want to use each time you use Reacli.

That is why we enable the creation of a configuration file.

Usage

To use a global configuration, at the root of your project (next to the package.json), you can create a .reacli file. Its content, formatted as JSON, might contain the following key-value pairs:

// .reacli
{
  "scss": true, // or false
  "flow": true, // or false
  "redux": true, // or false
  "extension": "js" // or jsx 
}

If one option is not set in your .reacli file, the default one will be used.

Not having a .reacli file is like having one that contains:

// .reacli
{
 "scss": false,
 "flow": false,
 "redux": false,
 "extension": "jsx" 
}
Ignore the global configuration

When using a .reacli file to configure the Reacli tool globally for your project, it might happen that you want to ignore this configuration file when creating a new element.

To do so, you can use the -i or --ignore-config-file argument.