Licence
MIT
Version
0.0.15
Deps
0
Size
70 kB
Vulns
0
Weekly
0
React BreakPoints Id
Breakpoints are customizable widths that determine how your responsive layout without render for Reactjs
Installation
npm i react-breakpoints-idor
yarn add react-breakpoints-idUsage Example
import React from 'react';
import BreakPoint from 'react-breakpoints-id';
export default function App() {
return (
<React.Fragment>
<BreakPoint breakPoint={['xs']}>
<p>Only XS</p>
</BreakPoint>
<BreakPoint breakPoint={['xs', 'md']}>
<p>XS to MD</p>
</BreakPoint>
<BreakPoint valBreakPoint={{md: 500, lg: 700}} breakPoint={['xs', 'md']}>
<p>Custom Value Break Point</p>
</BreakPoint>
</React.Fragment>
);
}
Props
| No | Name | Type | Description | Default Value | Mandatory |
|---|---|---|---|---|---|
| 1 | valBreakPoint | For custom from width xs, sm, md, lg, xl, xxl | object | { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1400 } | false |
| 2 | breakPoint | To determine the break point layout to be used. Example: if you use ["xs"] it means that the inner component will render when the device is 0px to 575px, if you use ["md"] it means that the inner component will render when the device is 768px to 991px, if you use ["sm", "lg"] means the inner component will render when the device is 576px to 991px | Array<'xs', 'sm', 'md', 'lg', 'xl', 'xxl'> | - | true |
Break Points
| Extra Small (xs) | Small (sm) | Medium (md) | Large (lg) | X-Large (xl) | XX-Large (xxl) |
|---|---|---|---|---|---|
| 0px to 575px | 576px to 767px | 768px to 991px | 992px to 1199px | 1200px to 1399px | >= 1400px |
Config For TypeScript
Add in file index.d.ts or global.d.ts
declare module 'react-breakpoints-id';