Skip to content

Releases: RoyalIcing/react-organism

Generator functions: animate using `yield`

27 Oct 07:40
Compare
Choose a tag to compare
  • Added support for generator functions as handlers
  • Each yield within a generator function may be an object of state changes, or a function that transforms the current state, or a Promise of either
  • Easier animation: window.requestAnimationFrame() is used to wait for the next frame between each yield

Example of an animating counter’s increment, that will add 1 on every frame:

export function * increment({ stride = 20 }) {
  while (stride > 0) {
    yield ({ count }) => ({ count: count + 1 })
    stride -= 1
  }
}

Example of load handler that yields initial state:

export function * load({ path }, prevProps) {
  if (!prevProps || path !== prevProps.path) {
    yield { items: null } // Clear so 'loading…' text appears
    yield fetchAPI(path).then(items => ({ items }))
  }
}