npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-styled-element

v0.6.0

Published

Simple wrapper around glamor to create styled elements in React.

Downloads

566

Readme

Create Styled Element 🖌

npm version Dependency Status styled with prettier

Thin wrapper around Glamor to create styled elements in React. Please refer to the Glamor Docs for any advance styling needs like animations, keyframes, etc.

The goal of this library is to be as small as possible. If you need features like theming and prop styles, I suggest using Glamorous. Many thanks to their work and inspiring me to write this library.

Install

yarn add create-styled-element

npm install create-styled-element --save

Example

import createStyledElement from 'create-styled-element'

function Column({ size, ...props }) {
  const staticStyles = {
    display: 'flex',
    flexDirection: 'column'
  }
  const dynamicStyles = {
    flex: `0 0 ${size / 12 * 100}`
  }
  // we use multiple chunks here to help reduce duplicate styles
  // since the "size" prop can produce multiple styles
  return createStyledElement('div', props)(
    staticStyles,
    dynamicStyles
  )
}

const App = () => (
  <Column size={6} css={{ backgroundColor: '#b4da55' }}/>
)

Usage

createStyledElement(component[, props, children])(...css)

This works almost exactly like React's create element, except it returns a function that allows you to pass default css styles and interact with props. It will also merge a css prop in so you can override styles later on if you need to.

The initial CSS chunks passed to the function created by createStyledElement are written left to right as their own glamor classnames. If a css prop is passed it will be written as its own glamor rule and added last.

By using different "chunks" of CSS you can reduce how much CSS is generated. You can see in the example above we will only ever create one class name for the static styles, whereas the dynamic styles can change over time and result in additional rules.

css PropTypes.oneOf([PropTypes.object, PropTypes.array])

Pass any styling overrides to your component.

innerRef PropTypes.func

Get access to the internal ref.

forwardRef PropTypes.bool

Forward the innerRef prop, rather than passing it as a ref. Note you only need this when composing another styled element and need access to the root ref.

built-in styled elements

stolen from glamorous 🙏

Naming things is hard. Pre-created styled elements are exposed on the createStyledElement function, and as imports for each DOM node type.

// tags with the same name as built-in JavaScript objects are importable with a Tag suffix
// and tag names that contain dashes are transformed to CamelCase
import { Section, H1, MapTag } from 'create-styled-element'

const App = () => (
  <Section css={{ padding: 32 }}>
    <H1 css={{ color: `rgba(0, 0, 0, 0.75)`}}>
      Styled Heading!
    </H1>
  </Section>
)

Running Locally

clone repo

git clone [email protected]:souporserious/create-styled-element.git

move into folder

cd ~/create-styled-element

install dependencies

yarn

run dev mode

yarn dev

open your browser and visit: http://localhost:8080/