@abdulghani/breakpointcontext 中文文档教程
Breakpointcontext
一个用于断点的 react.js 挂钩,它提供了上下文以进行有效检查
Install
从 yarn/npm 中获取它,无论
yarn add @abdulghani/breakpointcontext
npm install @abdulghani/breakpointcontext
Usage
使用它多么简单,只要
import BreakpointContext, { useBreakpoint } from "@abdulghani/breakpointcontext";
const MyComponent = () => {
return (
<BreakpointContext>
<YourSuperAwesomeChildren>
</BreakpointContext>
)
}
// and use it in your component
const YourSuperAwesomeChildren = () => {
const breakpoint = useBreakpoint();
if (breakpoint === "sm")
return <div>it's small</div>
else
return <div>it's huge</div>
}
您可以放置自己的配置来定义您自己的断点集,
const MyComponent = () => {
return (
<BreakpointContext breakpoints={myBreakpoints}>
<YourSuperAwesomeChildren>
</BreakpointContext>
)
}
选项就是这样输入的
type breakpoints = {
[keys: string]: number; // set of breakpoint value tied to the key as the label
};
Breakpointcontext
a react.js hook for breakpoint that's provided with context for efficient checking
Install
get it from yarn/npm whatever
yarn add @abdulghani/breakpointcontext
npm install @abdulghani/breakpointcontext
Usage
use it as simple as
import BreakpointContext, { useBreakpoint } from "@abdulghani/breakpointcontext";
const MyComponent = () => {
return (
<BreakpointContext>
<YourSuperAwesomeChildren>
</BreakpointContext>
)
}
// and use it in your component
const YourSuperAwesomeChildren = () => {
const breakpoint = useBreakpoint();
if (breakpoint === "sm")
return <div>it's small</div>
else
return <div>it's huge</div>
}
you can put your own config to define your own set of breakpoints
const MyComponent = () => {
return (
<BreakpointContext breakpoints={myBreakpoints}>
<YourSuperAwesomeChildren>
</BreakpointContext>
)
}
the option is typed as such
type breakpoints = {
[keys: string]: number; // set of breakpoint value tied to the key as the label
};
更多