From 3beb3d3037f1fc592a0e156d511a6149228becc7 Mon Sep 17 00:00:00 2001
From: Maxim Alyoshin <mgreen097@gmail.com>
Date: Tue, 23 May 2023 15:05:24 +0400
Subject: [PATCH] fix: add guide for migration from `useBreakpoint` to
 `useMediaQuery`

---
 README.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/README.md b/README.md
index e321fe4f..e07d8228 100644
--- a/README.md
+++ b/README.md
@@ -210,6 +210,8 @@ const App = () => (
 
 ## Migration from v11
 
+### Theme
+
 The `createTheme` function has been replaced with `createStyledBreakpointsTheme`.
 
 ```diff
@@ -222,6 +224,8 @@ The `createTheme` function has been replaced with `createStyledBreakpointsTheme`
 + const theme = createStyledBreakpointsTheme();
 ```
 
+### Media Queries
+
 Additionally, the functions `up`, `down`, `between`, and `only` have been moved to the theme object. This means that you no longer need to import them individually each time you want to use them.
 
 ```diff
@@ -240,6 +244,33 @@ Additionally, the functions `up`, `down`, `between`, and `only` have been moved
 `
 ```
 
+### Hooks
+
+```diff
+- import { up } from 'styled-breakpoints';
+- import { useBreakpoint } from 'styled-breakpoints/react-styled';
+
+or
+
+- import { up } from 'styled-breakpoints';
+- import { useBreakpoint } from 'styled-breakpoints/react-emotion';
+
+- const Example = () => {
+-   const isMd = useBreakpoint(only('md'));
+-
+-   return <Layout>{isMd && </Box>}</Layout>
+- }
+
++ import { useMediaQuery } from 'styled-breakpoints/use-media-query';
+
++ const Example = () => {
++   const theme = useTheme();
++   const isMd = useMediaQuery(theme.breakpoints.only('md'));
++
++   return <Layout>{isMd && </Box>}</Layout>
++ }
+```
+
 ## Core concepts
 
 - **Breakpoints act as the fundamental elements of responsive design**. They enable you to control when your layout can adapt to a specific viewport or device size.