renature icon indicating copy to clipboard operation
renature copied to clipboard

Add a rerun button to react-live demos.

Open parkerziegler opened this issue 4 years ago • 0 comments
trafficstars

Currently, our docs site suffers a bit from our react-live sandboxes not being "rerun-able". Certain renature animation features, like delay, are best seen when you can catch the animation from the beginning. However, all react-live sandboxes begin running animations on mount (the default for renature), so these can get easily missed.

framer-motion solves this on their website by adding a "rerun" button to demos. For example:

image

Ideally, we could add a similar button that would restart the sandbox without fully unmounting every part of the LivePreview component.

An initial approach could be to use a useForceUpdate hook to re-render just the part of the sandbox responsible for rendering the LivePreview.

As far as icons go, I always recommend using the very nice (and free) set of Feather icons. Either of these should do: https://feathericons.com/?query=refresh

cc/ @upatel32

parkerziegler avatar Apr 09 '21 00:04 parkerziegler