jameslnewell / styled-components-breakpoint

Utility function for using breakpoints with styled-components 💅.
243 stars 17 forks source link

Add Generics to breakpoint #32

Open omonk opened 3 years ago

omonk commented 3 years ago

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;
    }}
  `}
`;