You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
1.8 KiB
HTML
83 lines
1.8 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle with React
|
|
description: TODO
|
|
image: /demos/flexbox-grid.jpg
|
|
extraJS: [ "demos/react.js" ]
|
|
externalJS: ["https://unpkg.com/react@latest/dist/react.js", "https://unpkg.com/react-dom@latest/dist/react-dom.js", "https://unpkg.com/babel-standalone@6.15.0/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-jsx" data-src="{{ site.baseurl }}/js/demos/react.js"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|