styled-breakpoints - npm Package Compare versions

Comparing version 13.1.0 to 13.1.1

package.json

 {
   "name": "styled-breakpoints",
-  "version": "13.1.0",
+  "version": "13.1.1",
   "description": "Simple and powerful css breakpoints for styled-components and emotion",
@@ -77,3 +77,2 @@ "main": "./styled-breakpoints/create-styled-breakpoints-theme/create-styled-breakpoints-theme.js",
     "cross-env": "^7.0.2",
-    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.0.1",
@@ -89,2 +88,3 @@ "eslint-config-airbnb": "19.0.4",
     "eslint-plugin-vitest": "^0.3.10",
+    "git-cz": "^4.9.0",
     "husky": "^8.0.3",
@@ -91,0 +91,0 @@ "jsdom": "^24.0.0",

README.md

@@ -46,2 +46,4 @@ <div align="center">
 
+<br>
+
 ## Preview
@@ -65,2 +67,4 @@
 
+<br>
+
 For **third party** components.
@@ -90,2 +94,4 @@
 
+<br>
+
 ### Desktop First
@@ -101,4 +107,6 @@
 
-### hooks API
+<br>
 
+### Hooks API
+
 <div>
@@ -119,10 +127,12 @@ <a href="https://codesandbox.io/s/styled-components-hooks-api-6q6w8?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp.tsx&theme=dark">
 - [quick start](#quick-start)
-- [media queries](#media-queries)
-  - [min-width](#min-width)
-  - [max-width](#max-width)
-  - [single breakpoint](#single-breakpoint)
-  - [between breakpoints](#between-breakpoints)
-  - [useMediaQuery hook](#usemediaquery-hook)
-- [customization](#customization)
+- [`Media Queries` API](#media-queries-api)
 
+  - [min-width - `up`](#min-width---up)
+  - [max-width - `down`](#max-width---down)
+  - [single breakpoint - `only`](#single-breakpoint---only)
+  - [breakpoints range - `between`](#breakpoints-range---between)
+  - [customization](#customization)
+
+- [`useMediaQuery` hook](#usemediaquery-hook)
+
 <br>
@@ -293,8 +303,12 @@
 
-## Media queries
+## Media queries API
 
 - 🚀 Caching is implemented in all functions to optimize performance.
 
-### Min-width
+<br>
 
+### Min-width `up`
+
+<br>
+
 <details><summary><strong>Type declaration</strong></summary>
@@ -321,2 +335,3 @@
 
+<br>
 <details><summary><strong>Convert to pure css: </strong></summary>
@@ -334,6 +349,8 @@
 
-### Max-width
+### Max-width - `down`
 
 We occasionally use media queries that go in the other direction (the given screen size or smaller):
 
+<br>
+
 <details><summary><strong>Type declaration</strong></summary>
@@ -360,2 +377,3 @@
 
+<br>
 <details><summary><strong>Convert to: </strong></summary>
@@ -371,2 +389,4 @@
 
+<br>
+
 > <strong>Why subtract .02px?</strong> Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [min- and max- prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
@@ -377,6 +397,8 @@
 
-### Single breakpoint
+### Single breakpoint - `only`
 
 There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
 
+<br>
+
 <details><summary><strong>Type declaration</strong></summary>
@@ -403,2 +425,3 @@
 
+<br>
 <details><summary><strong>Convert to: </strong></summary>
@@ -416,6 +439,8 @@
 
-### Between breakpoints
+### Breakpoints range - `between`
 
 Similarly, media queries may span multiple breakpoint widths.
 
+<br>
+
 <details><summary><strong>Type declaration</strong></summary>
@@ -443,2 +468,3 @@
 
+<br>
 <details><summary><strong>Convert to: </strong></summary>
@@ -454,3 +480,2 @@
 <hr/>
-
 <br>
@@ -462,2 +487,4 @@
 
+<br>
+
 `theme/config.ts`
@@ -481,4 +508,6 @@
 
-<h3>🎨 Merge With another theme</h3>
+<h3>🎨 Merge with Another Theme</h3>
 
+<br>
+
 `theme/config.ts`
@@ -530,3 +559,4 @@
 const SomeComponent = () => {
-  const isMd = useMediaQuery(useTheme().breakpoints.only('md'));
+  const { breakpoints } = useTheme();
+  const isMd = useMediaQuery(breakpoints.only('md'));
 
@@ -533,0 +563,0 @@ return <AnotherComponent>{isMd && <Box />}</AnotherComponent>;

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38980

increased by0.55%

Number of lines in readme file

604

increased by5.23%

No dependency changes