How to use @sanity/state-router - 3 common examples
To help you get started, we’ve selected a few @sanity/state-router examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
sanity-io / sanity / packages / @sanity / imagetool / example / browser.js View on Github 
import Debug from 'debug'
import PropTypes from 'prop-types'
import React from 'react'
import ReactDOM from 'react-dom'
import ImageToolDemo from './src/ImageToolDemo'
import HotspotImageDemo from './src/HotspotImageDemo'
import history from './src/history'
import {createRoute, createScope, RouterProvider, RouteScope, StateLink} from '@sanity/state-router'
import IMAGES from './src/data/testImages'
Debug.disable('')
Debug.enable(process.env.DEBUG)
const DEFAULT_IMAGE_INDEX = 4
const routes = createRoute('/*', [
createRoute('/:demoName/*', params => {
return params.demoName ? createScope(params.demoName, createRoute('/:imageIndex')) : []
})
])
class Root extends React.Component {
static contextTypes = {
router: PropTypes.object
}
renderDemo(demoName) {
const routerState = this.context.router.state
const demoParams = routerState[demoName] || {}
if (demoName === 'hotspotimage') {
return
}
if (demoName === 'imagetool') {import PropTypes from 'prop-types'
import React from 'react'
import ReactDOM from 'react-dom'
import ImageToolDemo from './src/ImageToolDemo'
import HotspotImageDemo from './src/HotspotImageDemo'
import history from './src/history'
import {createRoute, createScope, RouterProvider, RouteScope, StateLink} from '@sanity/state-router'
import IMAGES from './src/data/testImages'
Debug.disable('')
Debug.enable(process.env.DEBUG)
const DEFAULT_IMAGE_INDEX = 4
const routes = createRoute('/*', [
createRoute('/:demoName/*', params => {
return params.demoName ? createScope(params.demoName, createRoute('/:imageIndex')) : []
})
])
class Root extends React.Component {
static contextTypes = {
router: PropTypes.object
}
renderDemo(demoName) {
const routerState = this.context.router.state
const demoParams = routerState[demoName] || {}
if (demoName === 'hotspotimage') {
return
}
if (demoName === 'imagetool') {
returncreateRoute('/:demoName/*', params => {
return params.demoName ? createScope(params.demoName, createRoute('/:imageIndex')) : []
})
])@sanity/state-router
A path pattern => state object bidirectional mapper
