diff --git a/README.md b/README.md index 69b8d40..ca113a6 100644 --- a/README.md +++ b/README.md @@ -341,6 +341,32 @@ const Button = styled.button` The same can be done when you `applyResponsiveStyleModifiers` _(deprecated)_. +## TypeScript example + +```ts +import styled from "styled-components" +import { applyStyleModifiers, WithModifiers, ModifiersConfig } from "styled-components-modifiers" + +// Example of modifiers with typing +const MODAL_MODIFIERS: ModifiersConfig = {} + +// Example of a styled component optionally accepting "modifiers" prop +const MyStyledWrapper = styled.div` + max-width: 800px; + ${applyStyleModifiers(MODAL_MODIFIERS)} +`; + +// Example of a custom component optionally accepting modifiers +interface MyComponentProps extends WithModifiers { + children: React.ReactNode; +} + +// Will be typed as expected +export const MyComponent = ({ children, modifiers }: MyComponentProps) => ( + {children} +); +``` + ## Built with Styled Components Modifiers Here's your chance to showcase work you are proud of! Feel free to add a link to