Small (0.5 Kb) react hook for getting media breakpoints state info in runtime

Related tags

React hooks media breakpoints usemedia
Overview

tiny-use-media

Small (0.5 Kb) react hook for getting media breakpoints state info in runtime

Usage

npm i tiny-use-media --save

Adn in your react code

import { useMedia } from "tiny-use-media";

// ...

const { current, md, lg } = useMedia({
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
});

console.log({ current, md, lg });
/*
  if you current screen size is 900px
  it will print:
  { current: 'md', md: true, lg: false }
*/

API

Input:

// object with breakpoints names/values
const breakpointsConfig = {
  mobile: 320, // min-width for mobile
  tablet: 640, // min-width for tablet
  desktop: 1024, // min-width for desktop
};

useMedia(breakpointsConfig);

Output:

const output = useMedia(breakpointsConfig);

Output contains "current" field which corresponds to a current breakpoint.

It also contains boolean values for each provided breakpoint.

E.g. output for screen size of 900px

{
    current: "tablet",
    mobile: true,
    tablet: true,
    desktop: false
}

License

MIT

You might also like...

This is a Covid Cases Tracker Web app , with Malawi cases as priority .......coontact stevenkamwaza@gmail.. for more info

Getting Started with Create React App This project was bootstrapped with Create React App. for demo visit https://mwcovid-tracker.vercel.app/ Availabl

May 25, 2022

A hook based project created during 20-Dec week ReactJS workshop

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 25, 2021

🌐 Unlimited free google translate component & hook

🌐 Unlimited free google translate component & hook

React Native Translator Preview Introduce Free translate component & hook Never need api key, This library is Unlimited free Support translators Googl

Dec 18, 2022

Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement.

useAsyncQuery Mirrors the functionality of Apollo client's useQuery hook, but with a "query" being any async function rather than GQL statement. Usage

Nov 16, 2022

Script to remove unnecessary properties from package.json on prepublish hook

clean-pkg-json Script to remove unnecessary properties from package.json on prepublish hook. Support this project by ⭐️ starring and sharing it. Follo

Oct 16, 2022

An easy hook to use with expo-calendar library!

useCalendar Hook 🚀 Updated to Expo SDK45 This is an easy hook to use expo-calendar. It allows you: Get access permission to calendar Open settings to

Nov 1, 2022

A Higher Order Component using react-redux to keep form state in a Redux store

A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Jan 3, 2023

🐻 Bear necessities for state management in React

🐻 Bear necessities for state management in React

A small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, isn't boilerplatey or opinionated, but still just eno

Jan 9, 2023

🏁 High performance subscription-based form state management for React

🏁 High performance subscription-based form state management for React

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.

Jan 7, 2023
Comments
  • Remove bundling

    Remove bundling

    You do not need vite to publish JS to npm.

    It is even better to put a separated ESM files rather than big JS bundle. Anyway, end-user will use own bundler. Since we have 2 different bundles (first one is your Vite, second is end-user webpack) they could conflict and increase file size and add unnecessary polyfills.

    opened by ai 2
Owner
Valeriy Komlev
Valeriy Komlev
GitHub
This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

React Hook Component State This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the so

Yongwoo Jung 2 May 15, 2022
Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic.

Synergies Create a performant distributed context state by synergyzing atomar context pieces and composing reusable state logic. synergies is a tiny (

Lukas Bach 8 Nov 8, 2022
react-dialog is a custom react hook to use a dialog easily

react-dialog react-dialog is a custom react hook to use a dialog easily. Documentation To use react-dialog follow the documentation. useDialog Returns

Levy Mateus Macedo 2 Mar 29, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
ESLint plugin for react-hook-form

eslint-plugin-react-hook-form react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for

Chuan-Tse Kao 37 Nov 22, 2022
An extremely helpful React Hook to trap the focusable elements / Hello Modals! Hello a11y!

react-use-focus-trap Everytime when people implement Modals... ...People forget that pro users as well as users that are permanently or temporarily re

David Lorenz 18 Nov 30, 2022
React hook library, ready to use, written in Typescript.

usehooks-ts React hook library, ready to use, written in Typescript. npm i usehooks-ts Created by Julien Caron and maintained with ❤️ by an amazing te

Julien 2.8k Jan 5, 2023
A reusable react hook that preserves a components semantic accessibility to create a visual block link.

useAccessibleBlockLink is a reusable react hook that preserves a components semantic accessibility to create a visual block link. This hook supports multiple links within the same block.

Wayfair Tech – Incubator 4 Nov 28, 2022
📋 useClipboardApi() is a React Hook that consumes Web Clipboard API.

?? use-clipboard-api useClipboardApi() is a React Hook that consumes Web Clipboard API. Table of Contents Motivation Usage Contributing Bugs and Suges

Helder B. Berto 22 Dec 15, 2022
A custom react hook to use a dialogs easily.

dialog-hook The dialog-hook is a custom react hook to use a dialog easily. First of all it is necessary to install the package in your project some co

Levy Mateus Macedo 2 Mar 29, 2022