Challenge: Implement a cool custom monitor #3
Description
<DevTools> accepts a monitor prop. The monitor that ships with react-devtools is called LogMonitor but it's just a React component. You can build your own instead.
I challenge you to implement a really different monitor than what we ship with. Some crazy ideas:
- A slider that lets you jump between computed states just by dragging it
- An in-app layer that shows the last N states right in the app (e.g. for animation)
- A time machine like interface where the last N states of your app reside on different Z layers
LogMonitor propTypes should give you some ideas about the stuff injected by DevTools:
static propTypes = {
// Stuff you can use
computedStates: PropTypes.array.isRequired,
currentStateIndex: PropTypes.number.isRequired,
stagedActions: PropTypes.array.isRequired,
skippedActions: PropTypes.object.isRequired,
// Stuff you can do
reset: PropTypes.func.isRequired,
commit: PropTypes.func.isRequired,
rollback: PropTypes.func.isRequired,
sweep: PropTypes.func.isRequired,
toggleAction: PropTypes.func.isRequired, // ({ index })
jumpToState: PropTypes.func.isRequired // ({ index })
}This data (and functions) will be injected into your monitor by the dev tools. Feel free to use (or ignore) any of them, and let me know if something important you need for a custom monitor is missing.