React-breakpoints-id NPM

React BreakPoints Id

Breakpoints are customizable widths that determine how your responsive layout without render for Reactjs

Installation

npm i react-breakpoints-id

yarn add react-breakpoints-id

Usage 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