Utils

A collections of utils and types, used across Styled packages.

Styles Generator

Function to map a component's props interface to a valid styles object using a custom mapper function.

import { stylesGenerator } from "@madebywild/styled-utils";

const props = {
  // The theme is usually provided by the ThemeProvider
  theme: {
    screens: {
      sm: 640,
      md: 768,
    },
  },
  gap: {
    initial: [2, 4],
    sm: [1, 3],
    md: [4, 5],
  },
  columns: {
    initial: 2,
    sm: 3,
    md: 4,
  },
};

const styles = stylesGenerator(componentStylesGenerator)(props);

Output:

{
  "gap": "2px 4px",
  "gridColumns": 2,
  "@media only screen and (min-width: 640px)": {
    "gap": "1px 3px",
    "gridColumns": 3
  },
  "@media only screen and (min-width: 768px)": {
    "gap": "4px 5px",
    "gridColumns": 4
  }
}

Responsive Props

Typescript utilities to convert a component's prop interface to a responsive interface and vice versa. For more details, visit the responsive guide.

import type { ResponsifyProps, UnresponsifyProps } from "@madebywild/styled-utils";

interface Theme {
  screens: Record<"sm" | "lg", unknown>;
}

interface Props {
  foo: string;
  bar: number;
}

ResponsifyProps

type ResponsiveProps = ResponsifyProps<Props>;

interface ResponsiveProps {
  foo: string | { sm?: string; lg?: string };
  bar: number | { sm?: number; lg?: number };
}

UnresponsifyProps

type UnresponsiveProps = UnresponsifyProps<ResponsiveProps>;

interface UnresponsiveProps {
  foo: string;
  bar: number;
}

Default theme object and interface to use as the starting point when creating a theme for a new project. Both the theme object and the interface can be extended to meet your project's requirements. Visit the getting started page to learn how to add and extend the theme in your project.

Default theme

export type Screens = "sm" | "md" | "lg" | "xl" | "2xl";

export interface Theme {
  screens: Record<Screens, number | string>;
}

export const theme: Theme = {
  screens: {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280,
    "2xl": 1600,
  },
};