• Stars
    star
    1,481
  • Rank 30,707 (Top 0.7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 7 years ago
  • Updated about 5 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,916
star
2

arc

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

rest

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

awesome-react-context

😎 A curated list of stuff related to the new React Context API
JavaScript
915
star
5

styled-tools

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

schm

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

reuse

♻️ Reuse React components to create new ones
TypeScript
496
star
8

singel

Single Element Pattern
JavaScript
409
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
183
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
67
star
14

bodymen

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

redux-saga-social-login

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

list-react-files

List React component files inside a directory
JavaScript
24
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

generator-rest-example

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

styled-selector

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

coolors-to-hex

Get hexadecimal values from a coolors url
JavaScript
16
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

mongoose-create-unique

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

divisa

A game about war and peace.
JavaScript
2
star
39

eyeport

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

alpha-bank

JavaScript
2
star
41

guild

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

is-git-rev

Verify if a string is a git-rev hash
JavaScript
2
star
43

clone

JavaScript
1
star
44

radiotoca

A PHP web radio with Twitter integration
PHP
1
star
45

adjacente

Blog para disciplina ExpansΓ£o dos Sentidos
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