·
use-snapshot ·Snapshot any value in a component's render and save it in one place for sending in crash logs and the like.
Installation
Requires React >= 16.8 for hooks.
With npm:
npm install --save use-snapshot
With yarn:
yarn add use-snapshot
Usage
Wrap your app or a sub-tree within the SnapshotProvider.
// ...; { return <SnapshotProvider> <RestOfYourApp /> </SnapshotProvider> ;} const rootElement = document;ReactDOM;
Snapshot any truthy values in any components render with useSnapshot(key: string, value: any, shouldSave: bool)
.
; { const name setName = ; const error setError = ; // fetch user and display their name ; // capture any API errors ; return <div className="username-display">name || '-----'</div> ;}
When you want to retrieve the data to send in a crash report, you can render a component (like a report a problem form) that implements const state = useStateSnapshot();
. state
will contain all the key-value pairs you've specified with useSnapshot
.
; { const state = ; return <YourForm state=state />;}
Why would I use this?
TL;DR: If you want to capture API errors, invalid form state, response bodies, or really any value available in render with pure React, this is the library for you. One of the selling points of Redux is global state that can be serialized and sent in debug logs and crash reports. But Redux can feel heavy-handed, so I wanted a way to do the same with pure React.