Wondering what’s next for npm?Check out our public roadmap! »

    react-component-query

    0.2.0 • Public • Published

    React Component Query

    npm version Dependency Status

    True component queries 🎉

    Write one query and drop the mic 🎙

    You're going to love it 👌

    Uses React Measure to detect component changes and return matched queries, matched props, and component dimensions.

    Usage

    npm install react-component-query --save

    <script src="https://unpkg.com/react-component-query/dist/react-component-query.js"></script>
    (UMD library exposed as `withComponentQueries`)

    Example Usage

    import React, { Component } from 'react'
    import { withComponentQueries } from 'react-component-query'
    import { ViewPager, Frame, Track, View } from 'react-view-pager'
     
    const componentQueries = [{
      name: 'sm',
      breakpoint: {
        minWidth: 0
      },
      props: {
        viewsToShow: 1
      }
    }, {
      name: 'md',
      breakpoint: {
        minWidth: 375
      },
      props: {
        viewsToShow: 2
      }
    }, {
      name: 'lg',
      breakpoint: {
        minWidth: 800
      },
      props: {
        viewsToShow: 3
      }
    }]
     
    class Slider extends Component {
      render() {
        const { matchedQueries, matchedProps, dimensions } = this.props
        const { sm, md, lg } = matchedQueries
        const { viewsToShow, swipe } = matchedProps
        const { width, height, top, right, bottom, left } = dimensions
        return (
          <ViewPager>
            <Frame>
              <Track
                viewsToShow={viewsToShow}
                viewsToMove={viewsToShow}
                contain
              >
                {[0, 1, 2, 3, 4, 5].map(index =>
                  <View key={index}>
                    {index + 1}
                  </View>
                )}
              </Track>
            </Frame>
          </ViewPager>
        )
      }
    }
     
    export default withComponentQueries(Slider, componentQueries)

    Running Locally

    clone repo

    git clone git@github.com:souporserious/react-component-query.git

    move into folder

    cd ~/react-component-query

    install dependencies

    npm install

    run dev mode

    npm run dev

    open your browser and visit: http://localhost:8080/

    Thank You

    Initial inspiration for this library came from React Container Query.

    Install

    npm i react-component-query

    DownloadsWeekly Downloads

    45

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • avatar