styled-components-breakpoint icon indicating copy to clipboard operation
styled-components-breakpoint copied to clipboard

Add Generics to breakpoint

Open omonk opened this issue 4 years ago • 0 comments

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

omonk avatar Oct 12 '21 15:10 omonk