mkcomponent's Introduction

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

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

Using a pkg manager

Install the package globally: yarn global add react-mkcomponent or npm install -g react-mkcomponent
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

Recommend Projects