Skip to main content

react-component

Now accepting new feature requests

If you're using our template and have ideas on how we can make it even better, we'd love to hear from you. Your feedback helps us prioritize improvements and build a tool that truly meets your needs.

Feel free to submit feature requests, suggestions, or any thoughts you have using the form below. We hope to hear from you soon!

Submit feature request
🎉 Supports Typescript
📗 Supports Storybook
🧪 Supports Unit tests
💅 Supports multiple CSS languages

Generate a fully functioning React function component.

Usage​

Usage
tps react-component <component-name>

# or long build path

tps react-component path/to/dir/<component-name>
Creates
| - <component-name>
    | - index.js (optional)
    | - <component-name>.js
    | - <component-name>.css (optional)
    | - <component-name>.test.js (optional)
    | - <component-name>.stories.js (optional)
Example
tps react-component Nav

Produces:

| - Nav
    | - index.js
    | - Nav.js
    | - Nav.css

Installation​

This templates is a part of Templates library. If you've already installed Templates, you'll have instant access to this template, and you can disregard this command.

npm i -g templates-mo

Options​

namedescriptionoptionaliasdefault

Copy​

If you like this template, but want to modify a few things use the copy command. It allows you to duplicate the template into your project and tailor it to your needs.

# if your not initialized run
tps init

# copy template
tps copy react-component

Examples​

How to use​

Lets say you have a basic react folder structure like so:

| - <cwd>/
    | - src/
        | - components/
            | - ...
        | - pages/
            | - ...
        | - index.js
        | - app.js
    | - package.json
    | - package-lock.json

If you wanted to generate a new component called Nav in the components folder, you could use the following command:

> tps react-component src/components/Nav

You will be prompted to answer the following questions:

? Would you like to use typescript?
? What type of extension do you want for your component?
? Would you like to include a css file?
? What type of css extension would you like?
? Would you like to include unit tests?
? Would you like to include a index file?
? Would you like to include a storybook file?

Depending on the answers you provide it will generate something similar to the following:

| - <cwd>/
    | - src/
        | - components/
            | - Nav/
                | - index.js
                | - Nav.js
                | - Nav.css
            | - ...
        | - pages/
            | - ...
        | - index.js
        | - app.js
    | - package.json
    | - package-lock.json

How to use options​

The React component template offers various customization options, which are listed in the options table. These will be prompted to you when you create a new instance. However to save time and avoid answering the same questions each time, you can set your answers ahead of time. You can do this either on the command line or in your .tps/.tpsrc file.

Lets say your project always uses a tsx extension for its components. You can add tsx to the extension answer when creating a new instance and you will no longer be prompted that question

tps react-component Nav --extension=tsx

Produces:

| - Nav
    | - index.tsx
    | - Nav.tsx
    | - Nav.css

No new folder​

By default, templates creates a new folder for you. If you don't want a new folder for your react component, you can use the newFolder and index options. These options both default to true

The newFolder option tells templates whether or not to place everything into a new folder.

The index option determines whether a index.js file should be created.

Lets say you have a basic react folder structure like so:

| - <cwd>/
    | - src/
        | - components/
            | - Nav.js
            | - Nav.css
        | - pages/
            | - ...
        | - index.js
        | - app.js
    | - package.json
    | - package-lock.json

If you wanted to generate a new component called footer in the components folder without a new folder, you can do one of the following:

You can pass in the following flags when your generating your new instance

tps react-component footer --no-newFolder --no-index

Depending on your answers, it would produce something to the following:

| - <cwd>/
    | - src/
        | - components/
            | - nav.js
            | - nav.css
            | - footer.js
            | - footer.css
        | - pages/
            | - ...
        | - index.js
        | - app.js
    | - package.json
    | - package-lock.json

How to use with typescript​

When generating a new instance of this template you will be asked if you want to use typescript. However if you know you want to use typescript in your project you can do one of the following:

You can pass in the following flags when your generating your new instance and you will no longer be prompted those questions

tps react-component Nav --typescript --extension=tsx

# or

tps react-component Nav --typescript -e tsx

Produces:

| - Nav
    | - index.tsx
    | - Nav.tsx
    | - Nav.css

Use all default answers​

To bypass all prompts and use default answers, simply include the --default flag when generating a new instance.

tps react-component --default

You can also combined this with other flags and/or in conjunction with your .tps/.tpsrc

Use typescript and use defaults for the rest of the questions. This will no longer prompt you any questions

tps react-component Nav --typescript --default