Typescript Version of AndreasBBS's React Router Decorator

README.md

Original solution thanks to AndreasBBS here.

preview.js

// This file goes in your .storybook folder

import ReactRouterDecorator from "./ReactRouterDecorator"

// You can add more decorators to the list
export const decorators = [ReactRouterDecorator];

// Other stuff here

ReactRouterDecorator.tsx

// You can put this file anywhere. This Gist assumed it's in the .storybook folder
import React, { useEffect } from 'react'
import { action } from '@storybook/addon-actions'
import { MemoryRouter, useLocation } from 'react-router-dom'
import { Args, ReactFramework } from '@storybook/react'
import { DecoratorFunction } from '@storybook/csf'

const LocationChangeAction = ({children}) => {
  const location = useLocation()

  useEffect(() => {
    if(location.key !== "default")
      action('React Router Location Change')(location)
  }, [location])

  return <>{children}</>
}

const ReactRouterDecorator: DecoratorFunction<ReactFramework, Args> = (Story, context) => {
  return (
    <MemoryRouter>
      <LocationChangeAction>
        <Story {...context}/>
      </LocationChangeAction>
    </MemoryRouter>
  )
}

export default ReactRouterDecorator