styled-breakpoints
Advanced tools
styled-breakpoints - npm Package Compare versions
Comparing version 13.0.0 to 13.1.0
| { | ||
| "name": "styled-breakpoints", | ||
| "version": "13.0.0", | ||
| "version": "13.1.0", | ||
| "description": "Simple and powerful css breakpoints for styled-components and emotion", | ||
@@ -5,0 +5,0 @@ "main": "./styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js", |
113
README.md
@@ -172,17 +172,8 @@ <div align="center"> | ||
| `theme/index.tsx` | ||
| `theme/config.ts` | ||
| ```tsx | ||
| import { createStyledBreakpointsTheme } from 'styled-breakpoints'; | ||
| import styled { ThemeProvider as Provider } from 'styled-components'; | ||
| export const theme = createStyledBreakpointsTheme(); | ||
| type Props = { | ||
| children: React.ReactNode; | ||
| } | ||
| export const ThemeProvider = ({children}: Props) => { | ||
| return <Provider theme={theme}>{children}</Provider> | ||
| } | ||
| ``` | ||
@@ -196,3 +187,3 @@ | ||
| import 'styled-components'; | ||
| import { theme } from './theme'; | ||
| import { theme } from './theme/config'; | ||
@@ -211,4 +202,4 @@ type CustomTheme = typeof theme; | ||
| ```tsx | ||
| import styled from 'styled-components'; | ||
| import { ThemeProvider } from './theme'; | ||
| import styled { ThemeProvider } from 'styled-components'; | ||
| import { theme } from './theme/config'; | ||
@@ -224,3 +215,3 @@ const Box = styled.div` | ||
| const App = () => ( | ||
| <ThemeProvider> | ||
| <ThemeProvider theme={theme}> | ||
| <Box /> | ||
@@ -251,17 +242,8 @@ </ThemeProvider> | ||
| `theme/index.tsx` | ||
| `theme/config.ts` | ||
| ```tsx | ||
| import { createStyledBreakpointsTheme } from 'styled-breakpoints'; | ||
| import { ThemeProvider as Provider } from '@emotion/react'; | ||
| export const theme = createStyledBreakpointsTheme(); | ||
| type Props = { | ||
| children: React.ReactNode; | ||
| }; | ||
| export const ThemeProvider = ({ children }: Props) => { | ||
| return <Provider theme={theme}>{children}</Provider>; | ||
| }; | ||
| ``` | ||
@@ -275,3 +257,3 @@ | ||
| import '@emotion/react'; | ||
| import { theme } from './theme'; | ||
| import { theme } from './theme/config'; | ||
@@ -290,4 +272,4 @@ type CustomTheme = typeof theme; | ||
| ```tsx | ||
| import styled from '@emotion/styled'; | ||
| import { ThemeProvider } from './theme'; | ||
| import styled, { ThemeProvider } from '@emotion/styled'; | ||
| import { theme } from './theme/config'; | ||
@@ -303,3 +285,3 @@ const Box = styled.div` | ||
| const App = () => ( | ||
| <ThemeProvider> | ||
| <ThemeProvider theme={theme}> | ||
| <Box /> | ||
@@ -466,30 +448,23 @@ </ThemeProvider> | ||
| <hr/> | ||
| <br> | ||
| ### useMediaQuery hook | ||
| ## Customization | ||
| features: | ||
| <h3>๐ ๏ธ Custom breakpoints</h3> | ||
| - ๐ง optimal performance by dynamically monitoring document changes in media queries. | ||
| - โ๏ธ It supports SSR (server-side rendering). | ||
| - ๐ฆ Minified and gzipped size 324b. | ||
| `theme/config.ts` | ||
| <details><summary><strong>Type declaration</strong></summary> | ||
| ```ts | ||
| declare function useMediaQuery(query: string) => boolean | ||
| ``` | ||
| </details> | ||
| ```tsx | ||
| import { useTheme } from 'styled-components'; // or from '@emotion/react' | ||
| import { useMediaQuery } from 'styled-breakpoints/use-media-query'; | ||
| import { Box } from 'third-party-library'; | ||
| import { createStyledBreakpointsTheme } from 'styled-breakpoints'; | ||
| const SomeComponent = () => { | ||
| const isMd = useMediaQuery(useTheme().breakpoints.only('md')); | ||
| return <AnotherComponent>{isMd && <Box />}</AnotherComponent>; | ||
| }; | ||
| export const theme = createStyledBreakpointsTheme({ | ||
| breakpoints: { | ||
| small: '100px', | ||
| medium: '200px', | ||
| large: '300px', | ||
| xLarge: '400px', | ||
| xxLarge: '500px', | ||
| }, | ||
| }); | ||
| ``` | ||
@@ -499,8 +474,6 @@ | ||
| ## Customization | ||
| <h3>๐จ Merge With another theme</h3> | ||
| <h3>๐จ Merge with another theme</h3> | ||
| `theme/config.ts` | ||
| `theme/index.tsx` | ||
| ```tsx | ||
@@ -521,3 +494,3 @@ import { createStyledBreakpointsTheme } from 'styled-breakpoints'; | ||
| ...createStyledBreakpointsTheme(), | ||
| } as const; | ||
| }; | ||
| ``` | ||
@@ -527,2 +500,34 @@ | ||
| ## `useMediaQuery` hook | ||
| features: | ||
| - ๐ง optimal performance by dynamically monitoring document changes in media queries. | ||
| - โ๏ธ It supports SSR (server-side rendering). | ||
| - ๐ฆ Minified and gzipped size 324b. | ||
| <br> | ||
| <details><summary><strong>Type declaration</strong></summary> | ||
| ```ts | ||
| declare function useMediaQuery(query: string) => boolean | ||
| ``` | ||
| </details> | ||
| ```tsx | ||
| import { useTheme } from 'styled-components'; // or from '@emotion/react' | ||
| import { useMediaQuery } from 'styled-breakpoints/use-media-query'; | ||
| import { Box } from 'third-party-library'; | ||
| const SomeComponent = () => { | ||
| const isMd = useMediaQuery(useTheme().breakpoints.only('md')); | ||
| return <AnotherComponent>{isMd && <Box />}</AnotherComponent>; | ||
| }; | ||
| ``` | ||
| <br> | ||
| ## License | ||
@@ -529,0 +534,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by0.88%
574
Worsened metrics
- Total package byte prevSize
- decreased by-0.14%
38768