---
layout: default
title: Shuffle with React
description: An example using the React framework with Shuffle.
image: /demos/flexbox-grid.jpg
extraJS: [ "demos/react.js" ]
externalJS: ["https://unpkg.com/react@16/umd/react.production.min.js", "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js", "https://unpkg.com/@babel/standalone/babel.min.js"]
jsType: "text/babel"
prism: true
---

<style>
  .photo-item {
    margin-top: 16px;
  }

  .photo-attribution {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 3px;
    background-color: black;
    color: white;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
  }

  .photo-attribution > span {
    display: inline-block;
    padding: 2px 3px;
  }

  .photo-attribution svg {
    position: relative;
    top: -1px;
    height: 12px;
    width: auto;
    vertical-align: middle;
    fill: white;
  }

  img[src^="data:image"] {
    width: 100%;
    height: 100%;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-12@sm">
      <h2>Shuffle with React</h2>
      <p>And other view-based libraries like Vue and Preact.</p>
      <p>The simplest way is to use <code>shuffleInstance.resetItems();</code> inside the <code>componentDidUpdate()</code> lifecycle method.</p>
    </div>
  </div>
</div>

<div id="root">
  <div class="container">
    <div class="row">
      <div class="col-12@sm">
        Loading React...
      </div>
    </div>
  </div>
</div>

<div class="container has-code-block">
  <div class="row">
    <div class="col-12@sm">
      <h2>Source code for this demo</h2>
      <p>Link to <a href="{{ site.baseurl }}/js/demos/react.js">demo source</a></p>
      <div class="code-block">
        <pre class="language-js" data-src="{{ site.baseurl }}/js/demos/react.js"></pre>
      </div>
    </div>
  </div>
</div>