https://github.com/iancleary/new-component
⚛ ⚡ CLI utility to create new components in React projects. ⚡ ⚛
https://github.com/iancleary/new-component
components javascript react script styled-components typescript
Last synced: 4 months ago
JSON representation
⚛ ⚡ CLI utility to create new components in React projects. ⚡ ⚛
- Host: GitHub
- URL: https://github.com/iancleary/new-component
- Owner: iancleary
- License: mit
- Created: 2023-05-19T21:13:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-10T21:20:45.000Z (over 2 years ago)
- Last Synced: 2025-03-30T07:31:43.152Z (10 months ago)
- Topics: components, javascript, react, script, styled-components, typescript
- Language: Python
- Homepage:
- Size: 65.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# new-component
[](https://pdm.fming.dev)
[](https://pycqa.github.io/isort/)
[](https://black.readthedocs.io/en/stable/)
[](https://github.com/pre-commit/pre-commit)
Ian Cleary ([iancleary](https://iancleary.me))
## Description
**Welcome!** This is a CLI for creating [styled-components](https://styled-components.com) for React projects quickly.
> Note: I've rewrote Josh W Comeau's [new-component](https://www.npmjs.com/package/new-component) NPM package in Python 🐍 and adapted it to my preferences. It is an excellent project and you should check it out!
I didn't understand styled components at first. At the time of this writing, I'm looking to develop my understanding of CSS, upon the advice of Josh W Comeau's blog post "[The styled-components Happy Path](https://www.joshwcomeau.com/css/styled-components/)".
After you read that article, you'll gather that this CLI aims to combine the wisdom of Josh's templates with my personal preferences.
- Adding the `import styled from "styled-components"` in the new `component.js` file.
- Adding a `styled.Wrapper` component definition (and making it .the parent html element in the React Component's `render` function)
## Quickstart
```sh
❯ pipx install new-component
❯ new-component --help
```
That will output the following:
```
Usage: new_component [OPTIONS] NAME
Creates an new component directory in a React project, with opinionated
defaults for styled-components.
See https://styled-components.com/ for more information.
Arguments:
NAME Name of component to create. [required]
Options:
-d, --directory TEXT The directory in which to create the component.
[default: src/components/]
-e, --extension TEXT The file extension for the created component files.
[default: js]
-v, --version Show the application's version and exit.
--install-completion Install completion for the current shell.
--show-completion Show completion for the current shell, to copy it or
customize the installation.
--help Show this message and exit.
```
## Example Usage
The first and only argument is the name of the component to create.
```bash
❯ new-component Backdrop
Created a new Backdrop Component 💅 🚀!
/Users/iancleary/Personal/new-component/src/components/Test4
```
The path printed is the absolute path to new component folder.
> It will very based upon your setup!
This command created two files:
`src/components/Backdrop/index.js`
`src/components/Backdrop/Backdrop.js`
The contents of the files will be as follows:
```js
// `src/components/Backdrop/index.js`
export { default } from "./Backdrop"
```
```js
// `src/components/Backdrop/Backdrop.js`
import React from "react"
import styled from "styled-components"
const Backdrop = ({children}) => {
return (
{children}
)
};
const Wrapper = styled.div`
/* CSS Goes Here */
`
export default Backdrop
```
## Configuration
Configuration can be done through 3 different ways:
* Creating a global `settings.json` in your home directory (`~/.config/new-component/settings.json`).
* Creating a local `.new-component-config.json` in your project's root directory.
* Command-line arguments.
The resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.
## API Reference
### Directory
Controls the desired directory for the created component. Defaults to src/components
Usage:
Command line: `--directory ` or `-d `
JSON config: `{ "directory": }`
### File Extension
Controls the file extension for the created components. Can be either js (default) or jsx.
Usage:
Command line: `--extension or -e `
JSON config: `{ "extension": }`
## Further information
> I will likely evolve this CLI as I learn more; I'm on my way 😊
- Add different component types
- Promote better patterns to ensure CSS (single source of styles, Isolated CSS)
Thanks to Josh W Comeau's blog post "[The styled-components Happy Path
](https://www.joshwcomeau.com/css/styled-components/) for starting my education! Again, it puts this README in perspective.
**Enjoy quickly creating styled components 💅 🚀!**
## Contributing
I created this CLI for my opinionated uses and may not accept changes.
See [CONTRIBUTING.md](.github/CONTRIBUTING.md).