Skip to content

Commit

Permalink
feat: add createBreakpoint
Browse files Browse the repository at this point in the history
  • Loading branch information
streamich authored Oct 25, 2019
2 parents d7a4b75 + 13ac976 commit 79ba4ef
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 1 deletion.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
- [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
- [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
- [`useMeasure`](./docs/useMeasure.md) — tracks an HTML element's dimensions using the Resize Observer API.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
- [`createBreakpoint`](./doc/createBreakpoint.md) — tracks `innerWidth`
<br/>
<br/>
- [**UI**](./docs/UI.md)
Expand Down
43 changes: 43 additions & 0 deletions docs/createBreakpoint.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# `createBreakpoint`

## Usage

### use default breakpoint

laptopL: 1440, laptop: 1024, tablet: 768

```jsx
import React from "react";
import { createBreakpoint } from "react-use";

const useBreakpoint = createBreakpoint();

const Demo = () => {
const breakpoint = useBreakpoint();

if (breakpoint === "laptopL") return <div> This is very big Laptop </div>;
else if (breakpoint == "laptop") return <div> This is Laptop</div>;
else if (breakpoint == "tablet") return <div> This is Tablet</div>;
else return <div> Too small!</div>;
};
```

### use custom breakpoint

XL: 1280, L: 768, S: 350

```jsx
import React from "react";
import { createBreakpoint } from "react-use";

const useBreakpoint = createBreakpoint({ XL: 1280, L: 768, S: 350 });

const Demo = () => {
const breakpoint = useBreakpoint();

if (breakpoint === "XL") return <div> XL </div>;
else if (breakpoint == "L") return <div> LoL</div>;
else if (breakpoint == "S") return <div> Sexyy</div>;
else return <div> Wth</div>;
};
```
29 changes: 29 additions & 0 deletions src/__stories__/createBreakpoint.story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { number, withKnobs } from "@storybook/addon-knobs";
import { storiesOf } from "@storybook/react";
import React from "react";
import { createBreakpoint } from "..";
import ShowDocs from "./util/ShowDocs";

const useBreakpointA = createBreakpoint();
const useBreakpointB = createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 });

const Demo = () => {
const breakpointA = useBreakpointA();
const breakpointB = useBreakpointB();
return (
<div>
<p>{"try resize your window"}</p>
<p>{"createBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"}</p>
<p>{breakpointA}</p>
<p>{"createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"}</p>
<p>{breakpointB}</p>
</div>
);
};

storiesOf("sensors|createBreakpoint", module)
.addDecorator(withKnobs)
.add("Docs", () => <ShowDocs md={require("../../docs/createBreakpoint.md")} />)
.add("Demo", () => {
return <Demo />;
});
24 changes: 24 additions & 0 deletions src/createBreakpoint.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useEffect, useState, useMemo } from 'react'

const createBreakpoint = (breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) => () => {
const [screen, setScreen] = useState(0)

useEffect(() => {
const setSideScreen = (): void => {
setScreen(window.innerWidth)
}
setSideScreen()
window.addEventListener('resize', setSideScreen)
return () => {
window.removeEventListener('resize', setSideScreen)
}
})
const sortedBreakpoints = useMemo(() => Object.entries(breakpoints).sort((a, b) => a[1] >= b[1] ? 1 : -1), [breakpoints])
const result = sortedBreakpoints.reduce((acc, [name, width]) => {
if (screen >= width) return name
else return acc
}, sortedBreakpoints[0][0])
return result
}

export default createBreakpoint
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export { default as useIntersection } from './useIntersection';
export { default as useInterval } from './useInterval';
export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
export { default as useKey } from './useKey';
export { default as createBreakpoint } from './createBreakpoint';
// not exported because of peer dependency
// export { default as useKeyboardJs } from './useKeyboardJs';
export { default as useKeyPress } from './useKeyPress';
Expand Down Expand Up @@ -63,7 +64,6 @@ export { default as usePromise } from './usePromise';
export { default as useRaf } from './useRaf';
export { default as useRafLoop } from './useRafLoop';
export { default as useRafState } from './useRafState';

/**
* @deprecated This hook is obsolete, use `useMountedState` instead
*/
Expand Down

0 comments on commit 79ba4ef

Please sign in to comment.