styled-components-breakpoint
styled-components-breakpoint copied to clipboard
Add Generics to breakpoint
You'll have to forgive me if this is failing to build, I've cloned locally but usually I work with TS not flow and haven't been able to get it to run.
Anyway, motivation for this is as follows:
interface Props {
readonly maxWidth: string;
}
const Comp = styled.div<Props>`
${(props) => {
// TS doesn't mind
console.log({ props: props.maxWidth });
return null;
}}
${breakpoint("tablet")`
${(p) => {
// TS doesn't like bc of breakpoint args
if (p.maxWidth) {
return `max-width: ${p.maxWidth}`;
}
return null;
}}
`}
`;
This change enables you to pass the types into breakpoint
interface Props {
readonly maxWidth: string;
}
const Comp = styled.div<Props>`
${breakpoint<Props>("tablet")`
${(p) => {
// TS happy
if (p.maxWidth) {
return `max-width: ${p.maxWidth}`;
}
return null;
}}
`}
`;