# Config

Config file contains next parameters:

* [`folderPath`](#undefined)
* [`templatesFolder`](#templatesfolder)
* [`multiProject`](#multiproject)
* [`skipFinalStep`](#skipfinalstep)
* [`checkExistenceOnCreate`](#checkexistenceoncreate)
* [`templates`](#templates)
* [`processFileAndFolderName`](#processfileandfoldername)
* [`placeholders`](#placeholders)
* [`afterCreation`](#aftercreation)

### `folderPath`

Root directory to place you components, or array of paths

Default: `src/`

### `templatesFolder`

Path to your own components templates

Default: `templates`

### `multiProject`

Allows you to set up config for mono-repository with several projects

Default: `false`

### `skipFinalStep`

Allows you to switch off last checking step

Default: `false`

### `checkExistenceOnCreate`

Allows you to switch on check component existence on create to avoid replacing

Default: `false`

### `templates`

Object with structure of your component, or array of objects.

Example: 

```javascript
{
    index: {
        name: 'index.ts',
        file: 'index.tmp'
    },
    component: {
        name: '[name].tsx',
        file: [
            { name: 'fc.tmp', description: 'Functional component' },
            { name: 'class.tmp', description: 'Class component' }
        ]
    },
    stories: {
        name: '[name].stories.tsx',
        file: 'stories.tmp',
        optional: true,
        default: false
    }
}
```

{% hint style="info" %}
Full description can be found on [templates page](/reactcci/set-up/config/templates.md)
{% endhint %}

### `processFileAndFolderName`

String or function which allows you to remap your component name to folder-name and file-name prefix

Default: `PascalCase`

Possible values:

* `camelCase`
* `PascalCase`
* `snake_case`
* `dash-case`
* `(name: string, parts: string[], isFolder: boolean) => string`

Example:

```javascript
{
    ...config,
    processFileAndFolderName: (name, parts, isFolder) => 
        isFolder ? name : parts.map((part) => part.toLowerCase()).join('-')
}
```

{% hint style="info" %}
`Here we has PascalCase for folders and dash-case for files`
{% endhint %}

### `placeholders`

List of placeholders which you can use to build your own component template

Default:\
`#NAME#` for a component name\
`#STYLE#` for css-module import\
`#STORY_PATH#` for storybook title

{% hint style="info" %}
More info on placeholder page
{% endhint %}

### `afterCreation`

Object with scripts to process you file after creation

Default: `undefined`

Example:

```javascript
{
    ...config,
    afterCreation: {                
        prettier: {
            extensions: ['.ts', '.tsx'], // optional
            cmd: 'prettier --write [filepath]'
        }
    }
}
```

{% hint style="success" %}
The most common case for script is to add files to git. It can be done like that:
{% endhint %}

```javascript
afterCreation: {
    git: {
        cmd: 'git add [filepath]'
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kamenskih.gitbook.io/reactcci/set-up/config.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.