1.0.6 • Published 1 year ago
create-react-functional-component v1.0.6
This NPM package will create a simple react functional boilerplate component along with its CSS module.
How to install:
npm i -g create-react-functional-component
How to use:
- Go to the location where you want to create the component.
- Type the below command in the terminal. Make sure to modify the componentName in the below command with the name you want.
Creating single component
srfc componentName
example:
srfc Box
Creating multiple components
srfc componentName1 componentName2
example:
srfc Home Articles
Creating typescript components
srfc componentName1 componentName2 -ts
example:
srfc Home Articles -ts
What it will do:
without -ts option
This creates a component with the given component name as in the below structure if -ts is not specified in the command.
├── currentDirectoryInTerminal
├── componentName
├── ComponentName.jsx
├── ComponentName.module.css
ComponentName.jsx will have the below boilerplate code.
import styles from "./ComponentName.module.css";
export default function ComponentName() {
return <div className{styles.ComponentName}>ComponentName</div>;
}
ComponentName.module.css will have the below boiler plate code.
.ComponentName {}
with -ts option
This creates a component with the given component name as in the below structure if -ts is specified in the command.
├── currentDirectoryInTerminal
├── componentName
├── ComponentName.tsx
├── ComponentName.module.css
All the files will have the same content as specified above, only the file name will be "tsx" instead of "jsx".