> For the complete documentation index, see [llms.txt](https://kamenskih.gitbook.io/reactcci/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kamenskih.gitbook.io/reactcci/set-up/config.md).

# 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]'
    }
}
```