new-component
Ian Cleary (iancleary)
Description
Welcome! This is a CLI for creating styled-components for React projects quickly.
Note: I've rewrote Josh W Comeau's 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".
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 newcomponent.js
file. - Adding a
styled.Wrapper
component definition (and making it .the parent html element in the React Component'srender
function)
Quickstart
❯ 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.
❯ 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:
// `src/components/Backdrop/index.js`
export { default } from "./Backdrop"
// `src/components/Backdrop/Backdrop.js`
import React from "react"
import styled from "styled-components"
const Backdrop = ({children}) => {
return (
<Wrapper>
{children}
</Wrapper>
)
};
const Wrapper = styled.div`
/* CSS Goes Here */
`
export default Backdrop
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 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.