Skip to content

Instantly share code, notes, and snippets.

@nullhook
Last active March 1, 2020 06:01
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
idea: match props in styled-component
const Foo = styled.div`
display: block;
opacity: 0;
color: ${by('color')};
${eq('red')`
background-color: red;
`};
${isEqOr('left', 'right')`
position: relative;
`};
${match('size', 'large')`
font-size: 50px;
`};
`
// usage
<Foo red left size="large"></Foo>
@nullhook
Copy link
Author

error handling:

function must(value, message = '') {
  if (value == null) {
    throw new Error(message || `Expected a non-null value`);
  }
 
  return value;
}

@nullhook
Copy link
Author

const match = (prop, variant) => (...style) => (props) => {
  const result = props[prop];

  must(result);
  if (result === variant) { return css(...style); }
  return null;
};

const eq = (prop) => (...style) => (props) => {
  const result = props[prop];

  if (result) { return css(...style); }
  return null;
};

@nullhook
Copy link
Author

const by = (prop) => (props) => {
  const result = props[prop];
  return result;
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment