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

    react-eq

    0.1.3 • Public • Published

    React Element Queries

    NOTE: This is a very early beta.

    We liked the way that https://github.com/Snugug/eq.js handled element queries, but we needed something that would work inside of our React components. This implements a similar interface to his implementation.

    Usage:

    <ElementQuery queries={{ medium: 600, large: 900 }} >
      <div>
        ◻️ ◽️ ◼︎ I'll act differently at 600px and 900px. ◼︎ ◽️ ◻️
      </div>
    </ElementQuery>
    

    Result when 600px <= element width < 900px:

    <div data-eq-state="medium">
      ◻️ ◽️ ◼︎ I'll act differently at 600px and 900px. ◼︎ ◽️ ◻️
    </div>
    

    Result when element width >= 900px:

    <div data-eq-state="medium large">
      ◻️ ◽️ ◼︎ I'll act differently at 600px and 900px. ◼︎ ◽️ ◻️
    </div>
    

    Events:

    When data-eq-state is updated, it will trigger a eq-update event on the div. This event will bubble up to the window.

    Install

    npm i react-eq

    DownloadsWeekly Downloads

    2

    Version

    0.1.3

    License

    ISC

    Last publish

    Collaborators

    • avatar