inertia-react@0.6.1

Published on May 31, 2021

This release adds a new createInertiaApp() setup method to make configuring Inertia easier (#698). Here's how to use it:

Before:

import React from 'react'
import { render } from 'react-dom'
import { App } from '@inertiajs/inertia-react'

const el = document.getElementById('app')

render(
  <App
    initialPage={JSON.parse(el.dataset.page)}
    resolveComponent={name => require(`./Pages/${name}`).default}
  />,
  el
)

After:

import React from 'react'
import { render } from 'react-dom'
import { createInertiaApp } from '@inertiajs/inertia-react'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props }) {
    render(<App {...props} />, el)
  },
})

Note that you no longer need to manually return the default export, as Inertia now handles this automatically.

createInertiaApp({
- resolve: name => require(`./Pages/${name}`).default,
+ resolve: name => require(`./Pages/${name}`),
})

Same goes for if you're using code splitting:

createInertiaApp({
- resolve: name => import(`./Pages/${name}`).then(module => module.default),
+ resolve: name => import(`./Pages/${name}`),
})

By default Inertia uses app as the root element that your app will boot in. However, you can change this using the id property:

createInertiaApp({
  id: 'my-custom-div',
})