react-breakpoints-hook

KO | EN

gitlite — search

#javascript #react #go #machine-learning #rust #deep-learning #linux #java #awesome #kubernetes #awesome-list #vue #security #openai

react-breakpoints-hook

(★ 12)

React hook for responsive design logic

react-breakpoints-hook Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-breakpoints-hook

### Installation
```bash
yarn add react-breakpoints-hook
```

### useBreakpoints configuration 
```js
// Configuration object consists of breakpoints names which have associated a min and a max value in pixels.
// Note: if max value is omitted it will be considered as the window width. 
{
  breakpointName1: {min: 0, max: 360},
  breakpointName2: {min: 361, max: 960},
  breakpointName3: {min: 961, max: 1400},
  breakpointName4: {min: 1401, max: null},
  breakpointName5: {min: 500, max: 1300},
}
```

### useBreakpoints usage
```js
// returns an object with corresponding boolean flags for each breakpoint, gets updated at rezise
let { xs, sm, md, lg } = useBreakpoints({
  xs: {min: 0, max: 360},
  sm: {min: 361, max: 960},
  md: {min: 961, max: 1400},
  lg: {min: 1401, max: null},
});
```

### useCurrentWidth usage
```js
// returns current width, gets updated at rezise
let width = useCurrentWidth();
});
```

### Example
```jsx
import React from 'react';
import { useBreakpoints, useCurrentWidth } from 'react-breakpoints-hook';

const App = () => {
  let width = useCurrentWidth();
  let { xs, sm, md, lg } = useBreakpoints({
    xs: {min: 0, max: 360},
    sm: {min: 361, max: 960},
    md: {min: 961, max: 1400},
    lg: {min: 1401, max: null},
  });

return (
    <div>
      <h1>
        {`Current width -> ${width}`}
      </h1>
      <p>
        {`Breakpoint: xs(${xs}) sm(${sm}) md(${md}) lg(${lg})`}
      </p>
    </div>
  );
}

export default App;
```

react-breakpoints-hook

react-breakpoints-hook Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-breakpoints-hook

react-breakpoints-hook Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README