Skip to content

`mkcomponent` cli utility to create React components.

Notifications You must be signed in to change notification settings

jepser/mkcomponent

Repository files navigation

mkcomponent

mkcomponent for React components.

Why?

I created this package to easily create React components, unifying the way we create them with other engineers in my team. This was inspired by @joaojeronimo when we worked at @Typeform.

Usage

Using npx

  1. Go the directory that you want to create the component and run npx react-mkcomponent *component-name*

Using a pkg manager

  1. Install the package globally: yarn global add react-mkcomponent or npm install -g react-mkcomponent
  2. Run mkcomponent *component-name* in the folder you want to create the component

Component structure

*component-name*/
├── index.js # exports the component
├── *component-name*.js # the component implmentation
├── *component-name*.test.js (opt-in with withTest) # tests with enzyme imported
├── *styled-components*.js (opt-in with withStyled) # well... for the styled components

Options

  • --class: to create a class component
  • --pure: to create a pure component
  • --func: (default) to create a functional component
  • --help: list the options

Configuration

In the package.json of your project you can extend the configuration of the library.

{
  //...
  "mkcomponent": {
    "withTest": false, // <bool> 
    "withStyled": false, // <bool>
    "testSuffix": "test" // {componentName}.{testSuffix}.js
  }
}

Conventions

  • pascal-case for component name
  • slug-case for folder and file names

Roadmap

  • Accept eslint configuration from the project so the component has the same configuration
  • Have a configuration file depending of the project
  • Support React memo
  • Support base file for storybook
  • Support "simple component" to create a file instead a folder

About

`mkcomponent` cli utility to create React components.

Resources

Stars

Watchers

Forks

Packages

No packages published