React-EQ

Element based queries for React

React-EQ is an implementation of element queries that uses the same API as Snugug’s eq.js.

Demo

Code

<Demo /> 

  const Demo = () => [
    <div key="mainContent" className="demo-main">
      <Movies />
    </div>,
    <div key="sidebar" className="demo-sidebar">
      <Movies />
    </div>
  ];

<Movies /> 

  const Movies = () => { const
    queries = { small: 340, medium: 400 }; return (
    <ElementQuery queries={queries}>
      <section className="movies">
        <header className="actor">
          <div className="actor-image-container">
            <img className="actor-image" src="https://ia.media-imdb.com/images/M/MV5BMjE2MjI4NTQxN15BMl5BanBnXkFtZTgwMDMyMDg4NTE@._V1_UY317_CR18,0,214,317_AL_.jpg"
            />
          </div>
          <h1 className="actor-name">Jack Black</h1>
        </header>
        <h2 className="movie-header">Filmography</h2>
        <ul className="movie-list">
          <Movie
            title="Jumanji: Welcome to the Jungle"
            img="https://ia.media-imdb.com/images/M/MV5BODQ0NDhjYWItYTMxZi00NTk2LWIzNDEtOWZiYWYxZjc2MTgxXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg"
          />
          <Movie
            title="Kung Fu Panda"
            img="https://ia.media-imdb.com/images/M/MV5BODJkZTZhMWItMDI3Yy00ZWZlLTk4NjQtOTI1ZjU5NjBjZTVjXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_UY268_CR1,0,182,268_AL_.jpg"
          />
          <Movie
            title="School of Rock"
            img="https://ia.media-imdb.com/images/M/MV5BMjEwOTMzNjYzMl5BMl5BanBnXkFtZTcwNjczMTQyMQ@@._V1_UX182_CR0,0,182,268_AL_.jpg"
          />
        </ul>
      </section>
    </ElementQuery>
  );

<Movie /> 

  const Movie = ({ title, img }) => (
    <li className="movie-list--item">
      <img className="movie-image" src={img} />
      <span className="movie-title">{title}</span>
    </li>
  );

Props

queries

Type: object

List of all sizes and a label for that size. It should be in the form:

  {
    'small': 200,
    'medium': 400
  }