Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

@kodingdotninja/use-tailwind-breakpoint

Package Overview
Dependencies
0
Maintainers
3
Versions
5
Issues
File Explorer

Advanced tools

@kodingdotninja/use-tailwind-breakpoint

Custom hooks to use breakpoints for React 🎐🔨

    0.0.5latest
    Github

Version published
Maintainers
3
Weekly downloads
527
decreased by-57.15%

Weekly downloads

Changelog

Source

v0.0.5

  • refactor: accept loose types on create function a4998d1

https://github.com/kodingdotninja/use-tailwind-breakpoint/compare/v0.0.4...v0.0.5

Readme

Source

use-tailwind-breakpoint

npm packagephobia/install packagephobia/publish

Custom hooks to use breakpoints for React 🎐🔨


Table of contents


Installing

# using npm npm install @kodingdotninja/use-tailwind-breakpoint # using yarn yarn add @kodingdotninja/use-tailwind-breakpoint

Usage

Resolve from Tailwind CSS configuration

Similar to pmndrs/zustand's create API, initialize the breakpoint hooks by passing the resolved Tailwind CSS configuration using resolveConfig:

// /hooks/tailwind.ts import create from "@kodingdotninja/use-tailwind-breakpoint"; import resolveConfig from "tailwindcss/resolveConfig"; import tailwindConfig from "path/to/tailwind.config.js"; const config = resolveConfig(tailwindConfig); export const { useBreakpoint } = create(config.theme.screens);

Extract screens values

Another option is to extract all screens values into a separate file:

// tailwind.screens.js or other name to separate breakpoint values const screens = { sm: "640px", md: "768px", // ... };

To keep the same values, require inside tailwind.config.js:

// tailwind.config.js module.exports = { theme: { screens: require("path/to/tailwind.screens.js"), }, // ... };

Then pass the extracted screens to the create function:

// /hooks/tailwind.ts import create from "@kodingdotninja/use-tailwind-breakpoint"; import screens from "path/to/tailwind.screens.js"; export const { useBreakpoint } = create(screens);

Without Tailwind CSS

While this package was built in mind for Tailwind CSS usage, it can be used without it since there is no dependency at all. You can pass any breakpoint values:

// /hooks/breakpoint.ts import create from "@kodingdotninja/use-tailwind-breakpoint"; export const { useBreakpoint } = create({ sm: "640px", md: "768px", // ... });

Available hooks

useBreakpoint()

Use breakpoint value from given breakpoint token

import { useBreakpoint } from "./lib/tailwind"; function App() { const isDesktop = useBreakpoint("md"); return <div>Current view: {isDesktop ? "Desktop" : "Mobile"}</div>; }

useBreakpointEffect()

Use given breakpoint value to run an effect

import { useBreakpointEffect } from "./lib/tailwind"; function App() { useBreakpointEffect("md", (match) => { if (match) { console.log("Desktop view"); } }); }

useBreakpointValue()

Resolve value from given breakpoint value

import { useBreakpointValue } from "./lib/tailwind"; function App() { const value = useBreakpointValue("md", "Desktop", "Mobile"); return <div>Current view: {value}</div>; }

Suggestions and/or questions

Head over to our dedicated Discord channel for use-tailwind-breakpoint.

Maintainers

License

MIT License, Copyright (c) 2021 Koding Ninja

Keywords

FAQs

Last updated on 22 Nov 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc