archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-18 14:06:52 +00:00
Code Issues Projects Releases Wiki Activity

change word

Browse Source
This commit is contained in:
Jakkapat Boonroj 2019-10-23 10:33:36 +07:00
parent 75827fd497
commit 13ac976b0d
4 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/createBreakpoint.md
View File

@ -1,4 +1,4 @@
# `useBreakpoint`
# `createBreakpoint`
## Usage
@ -8,10 +8,13 @@ laptopL: 1440, laptop: 1024, tablet: 768
```jsx
import React from "react";
import { useBreakpoint } from "react-use";
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>;
@ -25,10 +28,13 @@ XL: 1280, L: 768, S: 350
```jsx
import React from "react";
import { useBreakpoint } from "react-use";
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>;

16
src/__stories__/createBreakpoint.story.tsx
View File

@ -1,17 +1,21 @@
import { number, withKnobs } from "@storybook/addon-knobs";
import { storiesOf } from "@storybook/react";
import React from "react";
import { useBreakpoint } from "..";
import { createBreakpoint } from "..";
import ShowDocs from "./util/ShowDocs";
const useBreakpointA = createBreakpoint();
const useBreakpointB = createBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 });
const Demo = () => {
const breakpoint = useBreakpoint();
const breakpointB = useBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 });
const breakpointA = useBreakpointA();
const breakpointB = useBreakpointB();
return (
<div>
<p>{"try resize your window"}</p>
<p>{"useBreakpoint() #default : { laptopL: 1440, laptop: 1024, tablet: 768 }"}</p>
<p>{breakpoint}</p>
<p>{"useBreakpoint({ mobileM: 350, laptop: 1024, tablet: 768 })"}</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>
);

2
src/createBreakpoint.ts
View File

@ -1,6 +1,6 @@
import { useEffect, useState, useMemo } from 'react'
function createBreakpoint(breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) {
const createBreakpoint = (breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) => () => {
const [screen, setScreen] = useState(0)
useEffect(() => {

2
src/index.ts
View File

@ -31,7 +31,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 useBreakpoint } from './createBreakpoint';
export { default as createBreakpoint } from './createBreakpoint';
// not exported because of peer dependency
// export { default as useKeyboardJs } from './useKeyboardJs';
export { default as useKeyPress } from './useKeyPress';