Skip to main content

Quickly create opinionated Styled Components for React Projects

Project description

new-component

pdm-managed Imports: isort Code style: black pre-commit

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 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

 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

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 <value> or -d <value>

JSON config: { "directory": <value> }

File Extension

Controls the file extension for the created components. Can be either js (default) or jsx.

Usage:

Command line: --extension <value> or -e <value>

JSON config: { "extension": <value> }

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.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

new-component-0.6.0.tar.gz (10.8 kB view hashes)

Uploaded Source

Built Distribution

new_component-0.6.0-py3-none-any.whl (11.0 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page