Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use static symbols to gate arbitrary React props (as opposed to magic strings)
// 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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.