Quick start - Preact

Preact is React-compatible but has no StrictMode double-mount and preact-router has no router.afterEach. Use preact/hooks useEffect + popstate re-init.

Usage - Preact app

import { render } from 'preact'
import { useEffect } from 'preact/hooks'
import { initAnimations } from 'gclass-anims'

function Home() {
  useEffect(() => { initAnimations() }, [])
  return <div class="appear scroll spawn-up">hello preact</div>
}

function App() {
  useEffect(() => {
    const onRoute = () => setTimeout(() => initAnimations(), 0)
    window.addEventListener('popstate', onRoute)
    return () => window.removeEventListener('popstate', onRoute)
  }, [])
  return <Home />
}

render(<App />, document.getElementById('app'))

With preact-router

html

import Router from 'preact-router'
import { useEffect } from 'preact/hooks'
import { initAnimations } from 'gclass-anims'

function Home() { useEffect(() => initAnimations(), []); return <div class="spawn-up">home</div> }
function About() { useEffect(() => initAnimations(), []); return <div class="spawn-up">about</div> }

export default () => (
  <Router>
    <Home path="/" />
    <About path="/about" />
  </Router>
)