• Stars
    star
    1,482
  • Rank 31,713 (Top 0.7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Generate React components by replicating your own

generact

Generated with nod NPM version Build Status Coverage Status


Tool for generating React components by replicating your own.
It's intended to work no matter how your file structure is.


generact

ย Are you looking for a VS Code extension? Try vscode-generact.


It already works with boilerplates such as create-react-app (above example), react-boilerplate, react-starter-kit and ARc (ok, I'm self-promoting here ๐Ÿ˜†). So, most likely this will work for you with your current project.

Install

$ npm install -g generact

Motivation

Facebook poll Facebook poll

I usually work on different projects with different file structures. Whenever I needed to create a new component, the approach I used was to copy and paste a similar or very basic component and start writing the new component from it. Talking with other developers, this seemed like a very common process.

However, I've never been satisfied with that. It looked like I was doing a robot job. So why not create a robot to do that?

Usage

$ cd ~/my-projects/my-react-project
$ generact

That will scan ~/my-projects/my-react-project for components to replicate.

Specify another root path to find components

If you want to replicate components from another directory, you can do that by using root option:

$ generact --root relative/or/absolute/path/to/any/react/project

Specify component path to replicate

generact will probably find all component files inside the root path automagically (using list-react-files). But, if it doesn't, you can still pass in the component path:

$ generact relative/or/absolute/path/to/component.js

Contributing

PRs are welcome.

Use npm run watch while coding.

License

MIT ยฉ Diego Haz

More Repositories

1

constate

React Context + State
TypeScript
3,924
star
2

arc

React starter kit based on Atomic Design
JavaScript
2,914
star
3

rest

REST API generator with Node.js, Express and Mongoose
JavaScript
1,788
star
4

awesome-react-context

๐Ÿ˜Ž A curated list of stuff related to the new React Context API
JavaScript
917
star
5

styled-tools

Useful interpolated functions for CSS-in-JS
JavaScript
802
star
6

schm

Composable schemas for JavaScript and Node.js
JavaScript
513
star
7

reuse

โ™ป๏ธ Reuse React components to create new ones
TypeScript
495
star
8

singel

Single Element Pattern
JavaScript
408
star
9

nod

Node.js module generator/boilerplate with Babel, Jest, Flow, Documentation and more
JavaScript
360
star
10

redux-saga-thunk

Dispatching an action handled by redux-saga returns promise
JavaScript
221
star
11

styled-theme

Extensible theming system for styled-components ๐Ÿ’…
JavaScript
182
star
12

querymen

Querystring parser middleware for MongoDB, Express and Nodejs (MEN)
JavaScript
129
star
13

parse-prop-types

Parses React prop-types into a readable object
JavaScript
69
star
14

bodymen

Body parser middleware for MongoDB, Express and Nodejs (MEN)
JavaScript
47
star
15

list-react-files

List React component files inside a directory
JavaScript
25
star
16

redux-saga-social-login

Facebook/Google login implementation with redux-saga
JavaScript
25
star
17

mongoose-keywords

Mongoose plugin that generates a keywords path combining other paths values
JavaScript
22
star
18

redux-modules

A modular approach to better organize redux stuff (not another library)
JavaScript
21
star
19

coolors-to-hex

Get hexadecimal values from a coolors url
JavaScript
18
star
20

generator-rest-example

A fully commented RESTful API example generated with generator-rest
JavaScript
18
star
21

styled-selector

Get static CSS(-in-JS) selectors from React components
TypeScript
17
star
22

webpack-blocks-split-vendor

A webpack block that splits vendor javascript into separated bundle
JavaScript
15
star
23

webpack-blocks-happypack

A webpack block that adds happypack support to your webpack config
JavaScript
12
star
24

redux-form-submit

Adds an async submit action creator to redux-form
JavaScript
9
star
25

webpack-spawn-plugin

A webpack plugin that runs child_process.spawn within compilation
JavaScript
7
star
26

waterfall-grid

A Polymer wrapper element for waterfall.js, a 1KB Javascript library for Pinterest-like grids.
HTML
7
star
27

webpack-blocks-server-source-map

A webpack block that adds source map support to server bundle
JavaScript
5
star
28

yo

A Yeoman generator for generating next generation of Yeoman generators
JavaScript
5
star
29

webpack-assets-by-type-plugin

A webpack plugin that save assets by type
JavaScript
5
star
30

arc-universal-redux

Universal Redux version of ARc boilerplate
JavaScript
5
star
31

webpack-sort-chunks

Sorts webpack chunks by dependency
JavaScript
4
star
32

webpack-child-config-plugin

A webpack plugin that runs/watches another config
JavaScript
4
star
33

rest-api

REST API Boilerplate with Mongoose, Express and Nodejs
JavaScript
4
star
34

rich-param

An object with name and value which accepts pluggable methods as formatters or validators
JavaScript
3
star
35

reakit-code-lab

TypeScript
3
star
36

arc-fullstack

Fullstack version of ARc boilerplate
JavaScript
3
star
37

is-git-rev

Verify if a string is a git-rev hash
JavaScript
3
star
38

mongoose-create-unique

Mongoose plugin to create a document or return the existing one based on the unique index
JavaScript
3
star
39

divisa

A game about war and peace.
JavaScript
2
star
40

eyeport

Collection of useful methods to deal with element and viewports in DOM
JavaScript
2
star
41

alpha-bank

JavaScript
2
star
42

guild

Just a social network prototype made with jQuery
HTML
2
star
43

adjacente

Blog para disciplina Expansรฃo dos Sentidos
JavaScript
1
star
44

radiotoca

A PHP web radio with Twitter integration
PHP
1
star
45

clone

JavaScript
1
star
46

diegohaz

1
star
47

hear-parse

JavaScript
1
star
48

hear-api

JavaScript
1
star
49

diegohaz.com

JavaScript
1
star