Skip to content

Utility to create flexible React components which accept props to enable/disable certain styles.

License

Notifications You must be signed in to change notification settings

peterschussheim/prop-styles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

prop-styles

Utility to create flexible React components which accepts props to enable/disable certain styles.


Travis

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.

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.

Users of styled-components should reference the example below.

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 using glamorous, without ThemeProvider

Live demo

This is a minimal example of prop-styles usage with glamorous:

import React from 'react'
import { render } from 'react-dom'
import glamorous, { Div } from 'glamorous'
import propStyles from 'prop-styles'

const button = {
  fontSize: 16,
  margin: 10,
  border: 'none',
  cursor: 'pointer',
  display: 'inline-block',
  padding: '10px 20px',
  textAlign: 'center',
  transition: '0.25s cubic-bezier(0.17, 0.67, 0.52, 0.97)',
  borderRadius: 0,
  color: '#fff',
  boxShadow: '0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08)',
  ':hover': {
    opacity: 0.7,
    transform: 'translateY(-1px)',
    boxShadow: '0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08)'
  },
  ':focus': { outline: 0 },
  ':active': {
    transform: 'translateY(1px)'
  }
}

const small = {
  padding: '8px 16px'
}

const large = {
  padding: '12px 24px'
}

const colors = {
  success: '#29A88E',
  danger: '#C65F4A',
  primary: '#6DCFD3',
  info: '#FFD035',
  gray: '#5A6E73',
  accent: '#8E83A3'
}

const Button = glamorous.button(
  button,
  propStyles({
    success: success => ({ backgroundColor: colors.success }),
    danger: danger => ({ backgroundColor: colors.danger }),
    primary: primary => ({ backgroundColor: colors.primary }),
    info: info => ({ backgroundColor: colors.info }),
    gray: gray => ({ backgroundColor: colors.gray }),
    accent: accent => ({ backgroundColor: colors.accent }),
    small: [button, small, { fontSize: 12 }],
    large: [button, large, { fontSize: 18 }]
  })
)

function App() {
  return (
    <Div>
      <Div>
        <Button small success>
          Success
        </Button>
        <Button small danger>
          Danger
        </Button>
        <Button small primary>
          Primary
        </Button>
        <Button small info>
          Info
        </Button>
        <Button small gray>
          Gray
        </Button>
        <Button small accent>
          Accent
        </Button>
      </Div>
      <Div>
        <Button success>Success</Button>
        <Button danger>Danger</Button>
        <Button primary>Primary</Button>
        <Button info>Info</Button>
        <Button gray>Gray</Button>
        <Button accent>Accent</Button>
      </Div>
      <Div>
        <Button large success>
          Success
        </Button>
        <Button large danger>
          Danger
        </Button>
        <Button large primary>
          Primary
        </Button>
        <Button large info>
          Info
        </Button>
        <Button large gray>
          Gray
        </Button>
        <Button large accent>
          Accent
        </Button>
      </Div>
    </Div>
  )
}

render(<App />, document.getElementById('root'))
Example with glamorous

Live demo

Similar to the example above, this sample shows how prop-styles and glamorous ThemeProvider work together:

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"));
Example with styled-components

Live demo

import React from 'react'
import {render} from 'react-dom'
import styled, {ThemeProvider} from 'styled-components'
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 textPropStyles = propStyles({
  faded: ({theme}) => ({color: theme.colors.faded}),
  fadedExtra: ({theme}) => ({color: theme.colors.fadedExtra}),
  superheading: [heading, largerHeading, {fontSize: '36px'}],
  heading: [heading, largerHeading, {fontSize: '30px'}],
  subheading: [heading, largerHeading, {fontSize: '24px'}],
  superstandard: [heading, smallerHeading, {fontSize: '18px'}],
  standard: [heading, smallerHeading, {fontSize: '14px'}],
  substandard: [heading, smallerHeading, {fontSize: '12px'}],
})
const Text = styled.span`${textPropStyles};`

function App() {
  return (
    <ThemeProvider
      theme={{
        colors: {
          faded: '#666',
          fadedExtra: '#888',
        },
      }}
    >
      <div style={{maxWidth: 600, margin: 'auto'}}>
        <Text>Normal</Text>
        <Text subheading>subheading</Text>
        <Text faded superheading>
          faded superheading
        </Text>
        <Text fadedExtra substandard>
          fadedExtra substandard
        </Text>
      </div>
    </ThemeProvider>
  )
}

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

Inspiration

License

AGPL-3.0