Introducing “transient” props

import styled from "styled-components";const SomeOtherComponent = props => <div {...props} />;const Comp = styled(SomeOtherComponent)`
color: ${p => p.color};
`;
<Comp color="blue">Hello world!</Comp>
import styled from "styled-components";const SomeOtherComponent = props => <div {...props} />;const Comp = styled(SomeOtherComponent)`
color: ${p => p.$color};
`;
// $color will not be passed to SomeOtherComponent
<Comp $color="blue">Hello world!</Comp>
const props = {};for (let key in this.props) {
if (key[0] !== '$') props[key] = this.props[key];
}
React.createElement('whatever', props);
import styled from "styled-components";const Comp = styled.div`
color: red;
`;
// Now it's a <span> element
<Comp as="span">Hello World!</Comp>
import styled from "styled-components";const Comp = styled.div`
color: red;
`;
// Now it's a <span> element
<Comp $as="span">Hello World!</Comp>
import styled from "styled-components";const OtherComp = ({ as: asProp, ...props }) => <asProp {...props} onClick={somethingCool} />;const Comp = styled.div`
color: red;
`;
// Now it's a <span> element with an onClick handler
// that does something cool
<Comp $as={OtherComp} as="span">Hello World!</Comp>
  1. Do not forward transient props to the next layer ($something).
  2. If a transient and normal version ($something and something) of one of your accepted props are both given, consume the transient version and forward the normal version down.

--

--

--

Poetry, tech, other pursuits. 🏳️‍🌈

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Evan Jacobs

Evan Jacobs

Poetry, tech, other pursuits. 🏳️‍🌈

More from Medium

Build a Custom Switch with React

Writing a custom webpack plugin

How to render a DOM element into a React element?

Reusable Combobox/Dropdown Component React (Compound pattern)