prop-styles

Utility to make it easier to create a glamorous component which accepts props to enable/disable certain styles.

• prop-styles
  • Why
  • This Solution
  • Installation
  • Usage
    • Example
  • Inspiration
  • License

Why

I like implementing and using React components using a code style where during component usage, a prop can be added as a 'flag', rather than relying on ternaries to handle the logic. In my opinion, this leads to improved legibility and has the potential to reduce typos.

Credit for the original source goes to Kent C. Dodds who was kind enough to post a snippet to easily enable developers to use this style with 💄glamorous💄.

This Solution

Exposes a function, propStyles that accepts an object where the key is a prop and the value are the styles that should be applied if that prop is passed. Returns a function which you pass to a glamorousComponentFactory.

Installation

This package is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

yarn add prop-styles or npm install -s prop-styles

Usage

Example

Live demo

import React from "react";
import { render } from "react-dom";
import glamorous, { ThemeProvider } from "glamorous";
import propStyles from "prop-styles";

const heading = {
  display: "block",
  fontFamily: "inherit",
  fontWeight: "500",
  lineHeight: "1.1"
};
const largerHeading = {
  marginTop: "20px",
  marginBottom: "10px"
};

const smallerHeading = {
  marginTop: "10px",
  marginBottom: "10px"
};

// shoutout to https://seek-oss.github.io/seek-style-guide/typography/
const Text = glamorous.span(
  propStyles({
    faded: ({ theme }) => ({ color: theme.colors.faded }),
    fadedExtra: ({ theme }) => ({ color: theme.colors.fadedExtra }),
    superheading: [heading, largerHeading, { fontSize: 36 }],
    heading: [heading, largerHeading, { fontSize: 30 }],
    subheading: [heading, largerHeading, { fontSize: 24 }],
    superstandard: [heading, smallerHeading, { fontSize: 18 }],
    standard: [heading, smallerHeading, { fontSize: 14 }],
    substandard: [heading, smallerHeading, { fontSize: 12 }]
  })
);

function App() {
  return (
    <ThemeProvider
      theme={{
        colors: {
          faded: "#666",
          fadedExtra: "#888"
        }
      }}
    >
      <glamorous.Div maxWidth={600} margin="auto">
        <Text>Normal</Text>
        <Text subheading>subheading</Text>
        <Text faded superheading>
          faded superheading
        </Text>
        <Text fadedExtra substandard>
          fadedExtra substandard
        </Text>
      </glamorous.Div>
    </ThemeProvider>
  );
}

render(<App />, document.getElementById("root"));

Inspiration

• Kent C. Dodds who was kind enough to post this snippet
• Ryan Florence
• reactpatterns.com

License

AGPL-3.0