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

reactance

v1.3.2

Published

A CLI for React & Redux to simplify the creation of components, reducers and app templates

Downloads

6

Readme

reactance

A CLI for React & Redux to simplify the creation of components, reducers and app templates

Usage

"reactance" has 5 commands

  • reactance new
  • reactance reducer
  • reactance component
  • reactance api
  • reactance extractor
$ reactance --help
Usage: reactance [options] [command]

Options:
  -v, --version                       output the version number
  -h, --help                          display help for command

Commands:
  new|n [options] <app_name>              create a new app template of React & Redux
  reducer|r [options] <reducer_name>      create a Redux reducer & a Redux actions
  component|c [options] <component_name>  create a React component & a Redux container
  api|a <api_component_name>              create a React & Redux api component
  extractor|e <extractor_component_name>  create a React & Redux extractor component
  help [command]                          display help for command

reactance new :Create a new app template of React & Redux

$ reactance new sample
Creating sample

Installing packages...
Installed successfully!

Building...
Builded successfully!


Run commands

cd sample/
npm start


$ cd sample/
$ npm start

Build&Run

npm run build && npm start

ESLint

npm run lint
npm run lint:fix

Maintenance

npm run clean
npm run upgrade

Directory structure

sample/
├── dist
│   ├── build.js
│   ├── build.js.map
│   └── index.html
├── node_modules
│   ├── ...
│   └── ...
├── package-lock.json
├── package.json
├── src
│   ├── index.html
│   ├── index.tsx
│   └── store.ts
├── tsconfig.json
└── webpack.config.js

index.html

<!DOCTYPE html>
<html lang="ja">
    <meta charset="UTF-8">
    <title></title>
</html>
<body>
    <div id="root"></div>
</body>

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { History, createBrowserHistory } from 'history';
import { createStore } from 'store';

const history :History = createBrowserHistory();
const store = createStore(history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>Hello World</div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);

store.ts

import {
  createStore as reduxCreateStore, combineReducers, compose, applyMiddleware,
} from 'redux';
import { connectRouter, routerMiddleware, RouterState } from 'connected-react-router';
import { History } from 'history';
import logger from 'redux-logger';

export type RootState = {
  router: RouterState,
};

export const createStore = (history: History) => {
  const rootReducer = combineReducers<RootState>({
    router: connectRouter(history),
  });

  return reduxCreateStore(
    rootReducer,
    compose(
      applyMiddleware(
        routerMiddleware(history),
        logger,
      ),
    ),
  );
}

help

$ reactance help new    
Usage: reactance new|n [options] <app_name>

create a new app template of React & Redux

Options:
  -a, --author <author>  set author
  -m, --minimum          only React without Redux
  -h, --help             display help for command

reactance reducer :Create a reducer & a actions

reactance reducer sample

Directory structure

sample/
├── ...
├── src
│   ├── actions
│   │   └── sampleActions.ts
│   ├── reducers
│   │   └── sampleReducer.ts
│   ├── ...
│   ├── index.html
│   ├── index.tsx
│   └── store.ts
└── ...

sampleActions.ts

import actionCreatorFactory from 'typescript-fsa';

const actionCreator = actionCreatorFactory();

export const sampleActions = {
  sampleAction: actionCreator<any>('SAMPLE'),
};

sampleReducer.ts

import { reducerWithInitialState } from 'typescript-fsa-reducers';
import { sampleActions } from 'actions/sampleActions';

export type SampleState = {
  sample: any
};

const initialState: SampleState = {
  sample: Object,
};

export const sampleReducer = reducerWithInitialState(initialState)
  .case(sampleActions.sampleAction, (state: SampleState, payload: any): SampleState => ({
    ...state,
    sample: payload,
  }));

help

$ reactance help reducer
Usage: reactance reducer|r [options] <reducer_name>

create a Redux reducer & a Redux actions

Options:
  -m, --minimum  without sample
  -h, --help     display help for command

reactance component :Create a component & a container

$ reactance component sample

Directory structure

sample/
├── ...
├── src
│   ├── components
│   │   └── Sample.tsx
│   ├── containers
│   │   └── SampleCTR.tsx
│   ├── ...
│   ├── index.html
│   ├── index.tsx
│   └── store.ts
└── ...

Sample.tsx

import * as React from 'react';

type IProps = {};

export const Sample: React.FC<IProps> = (props: IProps) => {
  return (
    <div></div>
  );
};

SampleCTR.tsx

import * as React from 'react';
import { Dispatch, Action } from 'redux';
import { useSelector, useDispatch } from 'react-redux';
import { Sample as SampleComp } from 'components/Sample';
import { RootState } from 'store';

type IProps = {};

export const Sample: React.FC<IProps> = (props: IProps) => {
  const dispatch = useDispatch<Dispatch<Action>>();

  const data = useSelector<RootState, RootState>(
    state => state
  );

  const _props = {}

  return <SampleComp {..._props}/>;
};

help

$ reactance help component
Usage: reactance component|c [options] <component_name>

create a React component & a Redux container

Options:
  -m, --minimum  only a React component without a Redux container
  -h, --help  display help for command

reactance api :Create a React & Redux api component

$ reactance api sample

Directory structure

sample/
├── ...
├── src
│   ├── api
│   │   └── SampleAPI.tsx
│   ├── ...
│   ├── index.html
│   ├── index.tsx
│   └── store.ts
└── ...

SampleAPI.tsx

import * as React from 'react';
import { Dispatch, Action } from 'redux';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from 'store';

export const SampleAPI: React.FC<{}> = () => {
  const dispatch = useDispatch<Dispatch<Action>>();

  const data = useSelector<RootState, RootState>(
    state => state
  );

  React.useEffect(() => {}, [data]);

  return null;
};

help

$ reactance help api      
Usage: reactance api|a [options] <api_component_name>

create a React & Redux api component

Options:
  -h, --help  display help for command

reactance extractor :Create a React & Redux extractor component

$ reactance extractor sample

Directory structure

sample/
├── ...
├── src
│   ├── extractor
│   │   └── SampleExtractor.tsx
│   ├── ...
│   ├── index.html
│   ├── index.tsx
│   └── store.ts
└── ...

SampleExtractor.tsx

import * as React from 'react';
import { Dispatch, Action } from 'redux';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from 'store';

const extract = (data: RootState): RootState => (
  data
);

export const SampleExtractor: React.FC<{}> = () => {
  const dispatch = useDispatch<Dispatch<Action>>();

  const data = useSelector<RootState, RootState>(
    state => state
  );

  React.useEffect(() => {
    const extractedData = extract(data);
  }, [data]);

  return null;
};

help

$ reactance help extractor       
Usage: reactance extractor|e [options] <extractor_component_name>

create a React & Redux extractor component

Options:
  -h, --help  display help for command