useViewTransition

Allows you to easily use the View Transition API by wrapping the callback in a document.startViewTransition call.

Falls back to the regular callback if not supported.

Example

import { useState, useViewTransition } from "kaioken"

function App() {
  const [count, setCount] = useState(0)
  const transition = useViewTransition()

  const handleClick = () => {
    transition(() => setCount(count + 1))
  }

  return (
    <div>
      <p style={`font-size: ${16 + count}px; view-transition-name: count`}>
        Count: {count}
      </p>
      <button onclick={handleClick}>Increment</button>
    </div>
  )
}