Example of React Socks breakpoints being used inside a JSX component.

genres-with-breakpoints.js

    return (
      <div className="genres-page">
        <h1>Choose a Genre</h1>
        {(error || loading) && <h3 className="genre-info">{info}</h3>}
        <Breakpoint large up>
          <div className="genre-list">
            {this.renderRedirect()}
            {genreInfo}
          </div>
        </Breakpoint>
        <Breakpoint medium>
          <div className="genre-list">
            {this.renderRedirect()}
            {genreInfo}
          </div>
        </Breakpoint>
        <Breakpoint small down>
          <div className="genre-list">
            {this.renderRedirect()}
            {genreInfo}
          </div>
        </Breakpoint>
      </div>
    );