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

@prometheusresearch/react-stylesheet

v0.3.2

Published

React components with predefined styles

Downloads

3

Readme

React Stylesheet

Travis build status

React Stylesheet is a way to style React components with... React components!

Installation

% npm install @prometheusresearch/react-stylesheet

Basic usage

The idea is that component should define a stylesheet to render its UI with.

A stylesheet is just a collection of React components. You ask what React Stylesheet does for you then? It allows to define styled DOM components with an easy API:

import React from 'react'
import {createStylesheet} from '@prometheusresearch/react-stylesheet'

let stylesheet = createStylesheet({
  Root: { // generates <button /> with CSS class applied
    Component: 'button',
    fontSize: '12pt'
  },
  Caption: { // generates <button /> with CSS class applied
    Component: 'div',
    fontWeight: 'bold',
    hover: { // yes, pseudo classes are supported
      color: 'red'
    }
  }
})

Now we can define our component in terms of the stylesheet:

class Button extends React.Component {

  render() {
    let {caption} = this.props
    let {Root, Icon} = stylesheet
    return (
      <Root>
        <Caption>{caption}</Caption>
      </Root>
    )
  }
}

Stylable composite components

Sometimes you want to define a reusable component which you would want to style later using different stylesheets.

You can define an initial stylesheet which does nothing but renders base DOM components and then override that:

import React from 'react'
import {attachStylesheet} from '@prometheusresearch/react-stylesheet'
import Icon from 'react-fa'

let stylesheet = {
  Root: 'button',
  Icon: Icon,
};

@attachStylesheet(stylesheet)
class Button extends React.Component {

  render() {
    let {caption, icon} = this.props
    let {Root, Icon} = this.props.stylesheet
    return (
      <Root>
        <Icon name={icon} />
        {caption}
      </Root>
    )
  }
}

What we did here is:

  • We use attachStylesheet higher order component to attach an initial stylesheet to a composite component.

  • We use stylesheet prop passed to component to render component's UI.

Now the only part left is to produce a version of <Button /> with different styling. We use styleComponent(Component, stylesheet) function for that:

import {styleComponent} from '@prometheusresearch/react-stylesheet'

let SuccessButton = styleComponent(Button, {
  Root: {
    color: 'white',
    backgroundColor: 'green',
    hover: {
      color: 'red'
    }
  },
  Icon() {
    return <Icon name="ok" />
  }
})

We pass styleComponent() a stylesheet which is merged into the original one:

  • If you pass a component (Icon in the example above) it is used instead of the original one.

  • If you pass an object:

    • If it overrides DOM component in the original stylesheet, then the object is treated as a set of CSS styles. It's compiled to CSS class and a new styled DOM component wrapper is generated with the CSS class attached.

    • If it overrides composite component in the original stylesheet, then it's being used to style this component with recursive styleComponent function call.

The last point allows to style component hierarchies with easy:

let StyledForm = styleComponent(Form, {
  Root: {
    ...
  },
  // this is the same as calling styleComponent(SubmitButton, { ... })
  SubmitButton: {
    Root: {
      ...
    },
    Icon: {
      ...
    }
  }
})

Styled DOM components

You can also produce styled DOM components with styleComponent function:

import {styleComponent} from '@prometheusresearch/react-stylesheet'

let StyledDiv = styleComponent('div', {
  color: 'red'
})

React.render(<StyledDiv />, ...)

That results in:

<style>
  .autogenerated_class_name {
    color: red;
  }
</style>
...
<div class="autogenerated_class_name" />

The <style> element is attached only at least one of the corresponding styled DOM components are mounted into the DOM.

States for styled DOM components

Styled DOM components are allowed to have states:

import {styleComponent} from '@prometheusresearch/react-stylesheet'

let StyledDiv = styleComponent('div', {
  color: 'red',
  hover: {
    color: 'black'
  },
  customState: {
    backgroundColor: 'red'
  }
})

States like hover, active, ... are compiled into pseudoclasses and into regular classes as well.

You can toggle states by passing state names as keys to state prop of styled DOM components:

<StyledDiv state={{hover: false, active: true}} />

Helpers for DOM stylesheets

React Stylesheet provides helpers to define DOM stylesheets:

import {styleComponent} from '@prometheusresearch/react-stylesheet'
import {rgba, padding, none} from '@prometheusresearch/react-stylesheet/css'

let Warning = styleComponent('div', {
  color: rgba(245, 123, 12),
  padding: padding(10, 20),
  textDecoration: none,
})

Credits

React Stylesheet is free software created by Prometheus Research and is released under the MIT license.