npmpackage.info

Gathering detailed insights and metrics for react-component-files-generator

Other packages similar to react-component-files-generator

react-component-generator-with-jest

The react-component-generator is a command-line tool that streamlines the process of creating React components and their associated Jest and Enzyme-based unit test case files. The tool accepts various named arguments such as the component path, test case

auto-svg-component-generator

AutoSvgComponentGenerator is a generator that automatically converts .svg files into React components. SvgComponentGenerator automatically generates index.tsx or index.jsx in React component format when .svg files are added, moved, modified or deleted.

snap-component

CLI tool designed to streamline the creation of React components with full support for TypeScript, styled-components, Storybook, and Jest. It automates the setup of component files, including the component logic, styles, tests, and stories, allowing devel

crc-react

Creating boilerplate component with files for tests, styling and (Storybook) stories

react-component-files-generator

1.0.8

39.78 kB

Installations

npm install react-component-files-generator

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.17.1

NPM Version

8.19.2

Score

60.9

Supply Chain

93.7

Quality

71.7

Maintenance

100

Vulnerability

97

License

Releases

Unable to fetch releases

Contributors

1

Love this project? Help keep it running — sponsor us today! 🚀

Download Statistics

Total Downloads

1,132

Last Day

1

Last Week

2

Last Month

29

Last Year

183

Maintainers

1

Package Meta Information

Latest Version

1.0.8

Package Id

react-component-files-generator@1.0.8

Unpacked Size

39.78 kB

Size

9.93 kB

File Count

30

NPM Version

8.19.2

Node Version

16.17.1

Total Downloads

Cumulative downloads

Total Downloads

1,132

Last Day

0%

1

Compared to previous day

Last Week

-80%

2

Compared to previous week

Last Month

1,350%

29

Compared to previous month

Last Year

-39.2%

183

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

chalk inquirer ts-node-dev

Dev Dependencies

5

@types/inquirer @types/node ts-node tsconfig-paths typescript

react-component-files-generator

Warning This documentation is still being drafted

react-component-files-generator is a CLI tool helping developers creating react components faster with a simple command.

Usage

Install rcfg using npm :

1  npm install react-component-files-generator

Init rcfg to an existing react project by running the following command:

  npx rcfg --init

carbon

By default, components are generated in the same folder but you can change it by editing the config file:

|-- /src
    |-- /components
        |-- /Button
            |-- Button.component.js
            |-- Button.props.js
            |-- Button.style.scss
            |-- Button.test.js

You can now generate components by running:

  npx rcfg --build

carbon (3)

Files generated are autofilled with generic content and the imports needed :

Component - (e.g. Button.component.tsx)

1import React from 'react';
2import './Button.module.scss';
3import { ButtonProps } from './Button.props.ts';
4
5const Button = (): ButtonProps => {
6  return (
7    <div>Button</div>
8  )
9}
10
11export { Button };

Testing file - (e.g. Button.test.tsx)

1import { render } from '@testing-library/react';
2import { Button } from './Button.component.tsx';
3
4const component = () => {
5    return <Button />;
6};
7
8describe('[Component] Button', () => {
9    let container: any = null;
10
11    beforeEach(() => {
12        container = document.createElement('div');
13        document.body.appendChild(container);
14    });
15
16    afterEach(() => {
17        container.remove();
18        container = null;
19    });
20
21    it('should render Button component', () => {
22        render(component(), container);
23    });
24})

Config File

When you run --init for the first time, it will ask you a series of questions to customize the cli to your needs and will generate a "rcfg.config.json" config file.

Example of the rfsb.config.json config file:

1{
2    "name": "my project",
3    "componentEntryPoint": "./src/components",
4    "component": {
5        "extension": ".tsx",
6        "nameExtension": ".component.tsx",
7        "export": "default"
8    },
9    "style": {
10        "extension": ".less",
11        "nameExtension": ".module.less",
12        "module": true
13    },
14    "test": {
15        "extension": ".tsx",
16        "nameExtension": ".test.tsx"
17    },
18    "props": {
19        "extension": ".ts",
20        "nameExtension": ".props.ts"
21    },
22    "fixture": {
23        "extension": ".ts",
24        "nameExtension": ".fixture.ts"
25    }
26}

Empty State

No vulnerabilities found.

Empty State

No security vulnerabilities found.