https://github.com/thebiltheory/usebreakpoints

⚛️ React Hook to map value/breakpoint the styled-component way.
https://github.com/thebiltheory/usebreakpoints

Last synced: 2 months ago
JSON representation

⚛️ React Hook to map value/breakpoint the styled-component way.

• Host: GitHub
• URL: https://github.com/thebiltheory/usebreakpoints
• Owner: thebiltheory
• License: mit
• Created: 2020-04-26T13:02:33.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-08-03T19:52:38.000Z (almost 4 years ago)
• Last Synced: 2025-03-17T22:06:50.572Z (2 months ago)
• Language: TypeScript
• Homepage: https://codesandbox.io/s/usebreakpoints-x9g17
• Size: 5.62 MB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# useBreakpoints

[![CircleCI](https://circleci.com/gh/thebiltheory/useBreakpoints/tree/master.svg?style=svg)](https://circleci.com/gh/thebiltheory/useBreakpoints/tree/master) [![NPM](https://img.shields.io/npm/v/usebreakpoints.svg)](https://www.npmjs.com/package/@thebiltheory/usebreakpoints) ![npm](https://img.shields.io/npm/v/@thebiltheory/usebreakpoints?color=%236820FE) ![npm](https://img.shields.io/npm/dm/@thebiltheory/usebreakpoints)

React Hook to map value/breakpoint the styled-component way.

## Example/ Demo

[![Edit useBreakpoints](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/amazing-edison-x9g17?fontsize=14&hidenavigation=1&theme=dark)

## Install

```bash

npm install --save @thebiltheory/usebreakpoints

```

or

```bash

yarn add @thebiltheory/usebreakpoints

```

## Usage

```tsx

const [value, currentBreakpoint] = useBreakpoints(

  ['mobile', 'tablet', 'desktop', 'huge screen'],

  [576, 768, 992, 1600]

)

const [value, currentBreakpoint] = useBreakpoints(

  [1, 2, 3, 4],

  ['576px', '768px', '992px', '1200px']

)

import theme from 'src/theme'

const [value, currentBreakpoint] = useBreakpoints(

  [1, 2, 3, 4],

  theme.breakpoints

)

```

## License

MIT © [TheBilTheory](https://github.com/TheBilTheory)