@react-utilities/width-detector

Detects an element's width using React Context

Usage no npm install needed!

<script type="module">
  import reactUtilitiesWidthDetector from 'https://cdn.skypack.dev/@react-utilities/width-detector';
</script>

README

@react-utilities/width-detector 🏎💨

Typed with TypeScript npm version

Detect element width using React Context.


Install

pnpm install @react-utilities/width-detector

Usage

import React from 'react'
import { 
  WidthConsumer, 
  WidthProvider,
} from '@react-utilities/width-detector'

function App() {
  return (
    <div className="App">
      <WindowWidthProvider>
        <WindowWidthConsumer>
          {({ windowWidth }) => (
            <div className="window-width-tracker">
              {windowWidth}
            </div>
          )}
        </WindowWidthConsumer>
      </WindowWidthProvider>
    </div>
  )
}

Demo


React Utilities 🏎💨

Utilities for React to simplify development

Everyday components for speeding up React development with little or no extra boilerplate code.


View other React Utilities.