Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
CLI to create or edit React or React Native components with your own structure
Via yarn and interactive mode
$ yarn add -D reactcci
$ yarn rcci
or via npm and flags
$ npm i -D reactcci
$ npx rcci --name Header Body Footer --dest src/App
To install via npm:
npm install --save-dev reactcci
To install via yarn:
yarn add --dev reactcci
On first run CLI will ask you about automatic configuration. Just run a command:
npx rcci
This command creates file rcci.config.js
and template folder with basic template set.
Config file contains next parameters:
folderPath
src/
templatesFolder
templates
multiProject
false
skipFinalStep
false
checkExistenceOnCreate
false
templates
processFileAndFolderName
PascalCase
camelCase
PascalCase
snake_case
dash-case
(name: string, parts: string[], isFolder: boolean) => string
{
...config,
processFileAndFolderName: (name, parts, isFolder) =>
isFolder ? name : parts.map((part) => part.toLowerCase()).join('-')
}
placeholders
#NAME#
for a component name#STYLE#
for css-module import#STORY_PATH#
for storybook titleafterCreation
undefined
{
...config,
afterCreation: {
prettier: {
extensions: ['.ts', '.tsx'], // optional
cmd: 'prettier --write [filepath]'
}
}
}
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 set up you are able to use this placeholder by #NAME#
inside your template files.
Below, you can see the list of all available data and functions to create a new one.
Field | Description |
---|---|
project | Project name in multy-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 |
--update
, -u
--dest
, -d
--skip-search
, -s
dest
argument as is--name
, -n
--files
, -f
--files style test component[1]
style
and test
and will select second type of component by index--project
, -p
--sls
skipFinalStep
in config fileIf you need to generate something else, not components only, you are able to set up array of templates.
Example bellow:
{
...config,
templates: [
{
name: 'component', // will be added to default folderPath folder
files: {
index: {
name: 'index.ts',
file: 'component.ts'
}
}
},
{
name: 'service',
folderPath: 'services/', // will be added by the specific path
files: {
index: {
name: 'index.ts',
file: 'service.ts'
}
}
}
]
}
FAQs
React create component CLI
The npm package reactcci receives a total of 144 weekly downloads. As such, reactcci popularity was classified as not popular.
We found that reactcci demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.