👾
Reactcci ✨
  • 🦚Reactcci
  • set up
    • 🛠️Install
    • 🏎️Quick start
    • 🎚️Config
      • 📘Templates
      • 🤖Placeholders
    • 💻CLI
  • ⭐VSCode extension
  • 📂Git Hub
Powered by GitBook
On this page
  1. set up
  2. Config

Placeholders

Smart generated components make your coding easier

When you generate your component, you might be need component name, folder name or relative path to your file from project root.

All of these and more you can make with placeholders

Each placeholder is a function which get some data to build your own placeholder. During the multiple component creation all functions will be called for every single component.

Example:

placeholders: {
    NAME: ({ componentName }) => componentName
}

After this setup you are able to use this placeholder by tag #NAME# inside your template files. Below, you can see the list of all available data and functions to create your own placeholder.

Field
Description

project

Project name in multi-project mode

componentName, objectName

Name of the component or another object in multi-template mode

objectType

Type of object which was selected by user. It is component by default.

pathToObject

path to objects folder

Example: src/components

destinationFolder

relative path to folder of object which is being created

Example: App/Header/Logo

objectFolder

Absolute path to your object (component) folder

relativeObjectFolder

Relative path to your object (component) folder

filePrefix

processed object(component) name for filename

folderName

processed object(component) name for folder

files

Object of files which is being created

getRelativePath(to: string)

Function to get relative path to any another path

Example: ../../src/helpers

join(...parts: string)

Function to get joined parts of path.

Example: join(project, destinationFolder, componentName) => Project/Footer/Email

stringToCase(str: string, toCase: string)

Function to map any string to case.

Example: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Practice

Let's create two simple templates.

The first one will be path to styles file. It can be useful when you work with css-modules. Lets try:

{
    STYLE: ({ files }) => {
        if (files.style) {
            return `\nimport styles from './${files.style.name}';\n`;
        }
        return '';
    },
}

Now, let's make path to our story for Storybook to has stable story-structure:

{
    STORY_PATH: ({ join, project, destinationFolder, componentName }) => {
        return join(project, destinationFolder, componentName);
    }
}

Here we take three fields. project, destinationFolder and componentName. These fields describe full path to our story. After that we use the function join to connect them into path like that:

`${project}/${destinationFolder}/${componentName}`

Now we can you these placeholders in our templates by #STYLE# and #STORY_PATH#

PreviousTemplatesNextCLI

Last updated 2 years ago

Here we use the object files. This object has same keys as you described in . In this example we has file style, and if this file exists - we add new string to our template with the import.

🎚️
🤖
template