fix: add guide for migration from useBreakpoint to useMediaQuery

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.