Render on demand with render function

[TiagoCavalcante]

I'm working on a project where we can't use Canvas because we need it to have different behavior on window resizes, and some other custom CSS stuff.

How can I "enable" the demand frame loop with the render function?

The render function seems to have the frame loop always.

[CodyJasonBennett]

render accepts the same render props as canvas, so you can pass frameloop: 'demand' as follows:

import React from 'react'
import { render, events } from '@react-three/fiber'

window.addEventListener('resize', () =>
  render(<mesh />, document.querySelector('canvas'), {
    events,
    size: { width: window.innerWidth, height: window.innerHeight },
    frameloop: 'demand',
  }),
)

window.dispatchEvent(new Event('resize'))