Ask questionsImprove/add handling of default values

Is your feature request related to a problem? Please describe.

When building UI libraries you want to set good defaults but let consumers override if necessary. Which doesn't really work with the padding/margin currently. So there is no clear way of defining default values that works in all situations.

Eg here, as a consumer of the Box component I expect that I'll be able to overwrite the left padding.

Describe the solution you'd like

A better way to provide default values, using defaultProps isn't always enough. Currently I've created a wrapper around system, I wish something similar was available natively. The caveat with this solution is that it doesn't work with compose which is kind of a deal breaker.

export function system(config) {
  const parser = systemCore(config);
  parser.withDefaults = defaults => props => parser({ ...defaults, ...props });

  return parser;

Describe alternatives you've considered


Additional context



Answer questions alexandernanberg

I don't remember exactly what changes I made to make it work, but you can probably find out by diffing the gist against

The use case would looks something like

const styleProps = compose(layout, space).withDefaults({
  display: 'flex',
  p: 4,

which would set display: flex and padding: 16px unless you pass props to it

Haven't done any benchmarks, but I suspect that it performs slightly worse than v5 because we add the withDefaults fn to each parser


Related questions

No questions were found.
Github User Rank List