https://github.com/threepointone/freezus

magic component for transitions between screens
https://github.com/threepointone/freezus

Last synced: 7 days ago
JSON representation

magic component for transitions between screens

• Host: GitHub
• URL: https://github.com/threepointone/freezus
• Owner: threepointone
• Created: 2018-02-11T11:31:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-05-30T10:50:35.000Z (over 6 years ago)
• Last Synced: 2024-10-14T16:49:10.509Z (20 days ago)
• Language: JavaScript
• Size: 169 KB
• Stars: 184
• Watchers: 11
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - freezus

README

        
## freezus

[work in progress]

[ost](https://soundcloud.com/sahandii/cold-as-ice-remake)

`yarn add freezus`

```jsx

import Transition from 'freezus'

// ...

 ...}

  onExit={async function*() => {

    // do whatever!

    // the previous render sticks around until this function exits

    // and by magic, redux state is frozen inside it!

    // local state and everything else works as expected

    // you can now manually animate that old element out,

    // do a shared element transition, whatever.

    // use jquery for all I care

    // refs are doubly useful here :)

  }}>

  

```

## rationale

* traditionally, by rendering a new view in a position, we implicitly destroy the previous view (if it was different)

* alternately, we have to manually maintain ui state, mixing our animation concerns with business logic.

* `` abstracts that for you

## how does it work

* fragments to render multiple phases at once

* lifecycle - onEnter, onExit

* cancellable

* freeze redux state for the subtree

## cancellation

async generators handle cancellation pretty nicely

```jsx

onExit={async function*() => {

  try{

    await sleep(1000)

  }

  finally {

    const isCancelled = yield;

    // do the thing

  }

}}

```

## state

by combining `reduce` and the `yield`s from `onEnter`/`onExit`, you can

implement a redux-like pipeline to manage state. the default reducer is

`(x, y) => y` i.e. - it saves the last action as the state. You can read

from this state with `Transition.Consumer`

```jsx

[todo];

```

todo -

* examples

* tests

* freeze react-router

* freeze anything on context

* `