Use static symbols to gate arbitrary React props (as opposed to magic strings)

symbols-as-props.js

// to see it in action live, see https://goo.gl/EM9EPp
import {converge, objOf, toUpper, map, compose, reduce, merge, replace, toString, values} from 'ramda'

/**
 * upperKey :: [string] -> [{STRING: string}]
 * @example upperKey(arr) === [{A: 'a'}, {B: 'b'}, ...]
 */
const upperKey = converge(objOf, [toUpper, Symbol])

/**
 * toConstants :: [string] -> {STRING: Symbol(string)}
 * @example toConstants(arr) === {A: Symbol(a), B: Symbol(b), ...}
 */
const toConstants = compose(reduce(merge, {}), map(upperKey))

/**
 * fromSymbol :: Symbol(string) -> string
 * @example fromSymbol(Symbol(a)) === 'a'
 */
const fromSymbol = compose(replace(/(Symbol|[()])/g, ''), toString)

const constants = {
  sizes: toConstants(['small', 'med','large']),
  colors: toConstants(['red', 'green', 'blue']),
  kinds: toConstants(['primary', 'secondary']),
}

const Button = ({ 
  size = constants.sizes.SMALL, 
  color = constants.colors.RED, 
  kind = constants.kinds.PRIMARY 
} = {}) => ({ 
  constants,
  propTypes: map(values)(constants), 
  render: () => fromSymbol(size)
})


Button().propTypes
Button().render()