Skip to content

Instantly share code, notes, and snippets.

@ryuheechul
Created March 7, 2018 07:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryuheechul/1ec9aebbf470be3fecbc6d0a74c8e6ed to your computer and use it in GitHub Desktop.
Save ryuheechul/1ec9aebbf470be3fecbc6d0a74c8e6ed to your computer and use it in GitHub Desktop.
An example code that implements how to reuse Tagged template literals
const ttl = (strings, ...variables) => [strings, ...variables]
// or const ttl = (...args) => [...args]
// we are using www.styled-components.com as an example
const Adder = ({className, x, y}) => {
return (
<span className={className}> {x+y} </span>
)
}
const argified = ttl`
color: green;
font-size: 3em;
`;
const StyledAdder = styled(Adder)`
color: yellow;
font-size: 3em;
`;
// same result as StyledAdder except the color is grean
const GreenStyledAdder = styled(Adder)(...argified)
// Let's try reusing it
const DivAdder = ({className, x, y}) => {
return (
<div className={className}> {x+y} </div>
)
}
// Now you can reuse the ttl to a different component
const GreenStyledDivAdder = styled(DivAdder)(...argified)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment