Handle and dispatch transition states from anywhere in the application.

Overview

Transitions manager

npm build build

Transitions manager allows to handle and dispatch transition states from anywhere in the application.

demo

Installation

npm i @cher-ami/transitions-manager

Usage

PlayIn and playOut

Create a new transitionsManager instance, as static, on a React component.
Then, when handle the manager play state with usePlayIn and usePlayOut hooks.

Header.transitionsManager = new TransitionsManager()

function Header() {

  usePlayIn(Header.transitionsManager, async (done) => {
    await myPlayIn()
    done()
  })

  usePlayOut(Header.transitionsManager, async (done) => {
    await myPlayOut()
    done()
  })

  return ...
}

Now, from anywhere in the application, you can play the component via his own transitionsManager instance.

await Header.transitionsManager.playIn()
// now, the transtion is done.

Header.transitionsManager.playIn() will exectute the transition function of usePlayIn hook defined previously in Header component. This method return a promise that will be resolved when the transition is done with done() function from the same hook. Of course, "awaiting" the promise is not mandatory.

useTransitionsManager

Instead of handle the transitionsManager play state with usePlayIn and usePlayOut hooks, you can use the useTransitionsManager hook in your component.

This one returns the current play state of the transitionsManager instance when it changes. In this case, you have to execute the playInComplete and playOutComplete functions when the transition is done.

useTransitionsManager(Header.transitionsManager, async (playState) => {
  if (playState === "play-in") {
    await myPlayIn()
    Header.transitionsManager.playInComplete()
  }
  if (playState === "play-out") {
    await myPlayOut()
    Header.transitionsManager.playOutComplete()
  }
})

Mount and unmount

At this point, the component is eable to be play-in and play-out by his own transitionsManager instance from anywhere in the application. It's also possible to mount and unmount before and play-in and after play-out.

By using useIsMount hook from the parent component, you can check the mount and unmount boolean state to condition the rendering.

const App = () => {
  const mountHeader = useIsMount(Header.transitionsManager)
  return <div>{mountHeader && <Header />}</div>
}

Now, you can mount and unmount the component.

await Header.transitionsManager.mount()
await Header.transitionsManager.playIn()
// ...
await Header.transitionsManager.playOut()
await Header.transitionsManager.unmount()

Writting all the process is a bit long, but you can use the manager in a more simple way. If you don't want to specify each time mount and unmount methods, you can pass autoMountUnmount param to true in the constructor.

Header.transitionsManager = new TransitionsManager({ autoMountUnmount: true })

playIn method will call mount methods before is execution, and playOut will call unmount methods after is execution automatically. With autoMountUnmount, it will get the same result as in the previous example with that code:

await Header.transitionsManager.playIn() // auto mount + playIn
// ...
await Header.transitionsManager.playOut() // playOut + auto unmount

debugging

@wbe/debug is used on this project. It allows to easily get logs informations on development and production modes.

  • To use it, add this line in your browser console:
localStorage.debug = "TransitionsManager:*"
  • Optionally, pass a name parameter to the instance to print it in the debug namespace.
Header.transitionsManager = new TransitionsManager({ name: "Header" })

API usage

Mount

mount(): Promise<void>

mountComplete(): void

Unmount

unmount(): Promise<void>

unmountComplete(): void

PlayIn

playIn(): Promise<void>

playInComplete(): void

PlayOut

playOut(): Promise<void>

playOutComplete(): void

Utils

stagger(delay: number = 1, anims: (()=> any)[]): [promise: () => Promise<any>, cancel: () => void]

In some case, you want to execute a list of transitions in a staggered way. Staggered transition can be setted with the util stagger function.

import {stagger} from "@cher-ami/transitions-manager"

const [start, clear] = stagger(0.1, [
  Header.transitionsManager.playIn,
  Footer.transitionsManager.playIn,
])

// start staggered transition
await start()

// clear staggered transition if needed
clear()

Example

npm i

Start dev server

npm run dev

Licence

MIT

Credits

Willy Brauner

You might also like...

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

Dec 22, 2022

Single Page Application built using React, Context API and OMDb API.

Single Page Application built using React, Context API and OMDb API.

Movie Search App This project is a React application with functions to search for movies and add movies to favorites using OMDb API. Home Page Favorit

Sep 6, 2022

Chat application with express.js and ejs template engine

Full Stack Chat Applicaton project with Node Express.js MongoDB & EJS Template Engine - Tutorial Series Youtube Tutorial link You can get the complete

Dec 28, 2022

A web application that allows users to book rockets and join selected space missions, Using the SpaceX API.

Space-Travelers-Hub A web application that allow users to book rockets and join selected space missions, Using the SpaceX API. This project was bootst

Dec 9, 2021

This web application aim to produce an contest notifier utility and a modern open-source compiler.

This web application aim to produce an contest notifier utility and a modern open-source compiler.

This web application aim to produce an contest notifier utility and a modern open-source compiler. The current features of the application include : Code Runner , Upcoming and Ongoing Contests.

Dec 3, 2022

TV Show App is an application that allows to searh tv shows based on user input. Each tv show is displayed in a Bulma Card component and when clicked, heads you to the official tv show site

TV SHOW APP TV Show App is an application that allows to search tv shows based on user input. Each tv show is displayed in a Bulma* Card component and

Dec 19, 2021

The CryptoVerse is a Cryptocurrency web application developed using Reactjs for providing the latest updates, value statistics, market cap, supply and news regarding the Cryptocurrency market.

The CryptoVerse is a Cryptocurrency web application developed using Reactjs for providing the latest updates, value statistics, market cap, supply and news regarding the Cryptocurrency market.

CryptoVerse - A Crptocurrency Web Application Getting Started with Create React App This project was bootstrapped with Create React App. Available Scr

Oct 26, 2022

A chat application created using React,js and Chat Engine

⭐️ Chat-App ⭐️ A Chat Application created using React.js and Chat Engine Live Site Getting Started with Create React App This project was bootstrapped

Dec 15, 2022

Look it is a web application developed with React JS and using Sanity

Look-it social media app Look it's a web application that consists in a social media app where users who have registered can share all kinds of photos

Feb 1, 2022
Comments
  • Feature/dispatch options

    Feature/dispatch options

    • [x] would like to dispatch options from playIn and playOut methods :
     manager.playIn({ duration: 2 })
    
    • [x] write specific emitter witch accepts options as second argument
    • [x] write emitter "beeper" tests
    • [x] adapt hooks
    • [x] infer types from manager to hook options
    // options argument should receive type `GOptions` from manager instance 
    usePlayIn(manager, async (done, options) => {
      // ...
    })
    
    //  `{duration: number}` is GOptions,
    export const manager = new TransitionsManager<{duration: number}>()
    
    
    • [x] add default options as manager constructor argument
    export const manager = new TransitionsManager<{duration: number}>({ 
     options: { duration: 1 }
    })
    
    • [x] write documentation
    opened by willybrauner 0
  • New HOC api

    New HOC api

    • [x] create HOC to manage mount & unmount component automatically via useIsMount()
    // Create now an external instance :
    export const HeaderTransitionsManager = new TransitionsManager()
    
    // component using transitions manager 
    const Header = () => 
    {
    // ...
    }
    export default TransitionsHoc(Header, HeaderTransitionsManager)
    
    • [x] auMountUnmount option is now true by default
    • [x] add unit tests
    opened by willybrauner 0
  • Wait next frame on playin

    Wait next frame on playin

    Problem:

    The parent component mount the component using a TransitionsManager instance :

    const App = () => {
      const childIsMount = useIsMount(Child.transitionManager);
      return {childIsMount && <Child />}
    }
    

    The child can listen playStateSignal only on after being mounted with usePlayIn hook.

    usePlayIn(Child.transitionsManager, async (done) => {
        // here, the "playStateSignal" handler content
        // this code is executed when the manager dispatch "play-in" state
      })
    

    But sometimes the component start to listening after the TransitionManager instance dispatch "play-in" state. The child didn't catch this first dispatch and playIn is never fired.

    This MR just Add a "next frame" hake in order to wait the child component will be rendered BEFORE the "play-in" state will be dispatched by the manager.

    opened by willybrauner 0
Releases(v0.5.1)
  • v0.5.1(Dec 12, 2022)

  • v0.5.0(Jun 13, 2022)

    Feature

    • Dispatch options #14

    playIn and playOut methods accept options parameters witch can be dispatched with playState.

    From anywhere:

    headerTransitionsManager.playIn({ duration: 0 })
    

    From the components:

      usePlayIn(headerTransitionsManager, async (done, options) => {
        // do something with options duration
        console.log(options.duration)
        done()
      })
    

    Default options can be set on the manager instance:

    const headerTransitionsManager = new TransitionsManager({ 
      options: {
        duration: 1
      } 
    })
    

    For typescript developers:

    const headerTransitionsManager = new TransitionsManager<{duration?: number}>({ 
      options: {
        duration: 1
      } 
    })
    
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0-beta.0(May 30, 2022)

    Feature

    #11

    • Create HOC to manage mount & unmount component automatically:
    // Create now an external instance:
    export const HeaderTransitionsManager = new TransitionsManager()
    
    // component using transitions manager 
    const Header = () => {
    // ...
    }
    export default TransitionsHoc(Header, HeaderTransitionsManager)
    

    The older way to mount and unmount component without TransitionsHoc still available, but not recommended:

    const App = () => {
      const mountHeader = useIsMount(Header.transitionsManager)
      return <div>{mountHeader && <Header />}</div>
    }
    function Header() {
      // ...
    }
    Header.transitionsManager = new TransitionsManager()
    export default Header
    
    • auMountUnmount option is now true by default
    • Write unit tests
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(May 25, 2022)

    Fix

    #9

    Problem:

    The parent component mount the component using a TransitionsManager instance :

    const App = () => {
      const childIsMount = useIsMount(Child.transitionManager);
      return {childIsMount && <Child />}
    }
    

    The child can listen playStateSignal only on after being mounted with usePlayIn hook.

    usePlayIn(Child.transitionsManager, async (done) => {
        // here, the "playStateSignal" handler content
        // this code is executed when the manager dispatch "play-in" state
      })
    

    But sometimes the component start to listening after the TransitionManager instance dispatch "play-in" state. The child didn't catch this first dispatch and playIn is never fired.

    This MR just Add a "next frame" hake in order to wait the child component will be rendered BEFORE the "play-in" state will be dispatched by the manager.

    Source code(tar.gz)
    Source code(zip)
  • v0.2.2(May 23, 2022)

  • v0.2.0(Mar 8, 2022)

    feature

    #6 Stagger util function.

    In some case, you want to execute a list of transitions in a staggered way. Staggered transition can be setted with the util stagger function.

    import {stagger} from "@cher-ami/transitions-manager"
    
    const [start, clear] = stagger(0.1, [
      Header.transitionsManager.playIn,
      Footer.transitionsManager.playIn,
    ])
    
    // start staggered transition
    await start()
    
    // clear staggered transition if needed
    clear()
    
    Source code(tar.gz)
    Source code(zip)
  • v0.1.1(Feb 21, 2022)

Owner
Cher ami,
Creative & interactive studio
Cher ami,
USA Covid-19 Tracker is a mobile-first application built with React and Redux to give precise information about the virus behavior in the United States. Great transitions and user feedback made with plain CSS.

React.js USA Covid-19 Tracker This application allows the public to keep track of the stadistics of the Covid-19 Pandemic in the United Stated. You wi

Rafael Echart 14 Oct 25, 2022
Real-time covid data in Brazil states.

Brazil Covid Data Brazil Covid Data is a web application that allows you to see information about the pandemics on your state just by hovering it on t

Caio Lima 5 Feb 15, 2022
A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real-time collaboration anywhere

@yomo/react-cursor-chat ?? Introduction A react component helps bring Figma's Cursor Chat to your web applications in less than 3 minutes, making real

YoMo 84 Nov 17, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
A web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Space Travelers' Hub A web application for a company that provides commercial and scientific space travel services. The application allows users to bo

Manel Hammouche 8 Oct 14, 2022
This is a calculator application. The user can do some calculations on this application.

Math Magicians This is a calculator application. The user can do some calculations on this application. Built with: Reactjs Redux Live Live demo deplo

Firdavs Allamurotov 4 May 15, 2022
Chat Loop is a highly scalable, low-cost, and high performant chat application built on AWS and React leveraging GraphQL subscriptions for real-time communication.

Chat Loop Chat Loop is a highly scalable, low cost and high performant chat application built on AWS and React leveraging GraphQL subscriptions for re

Smile Gupta 24 Jun 20, 2022
Concircle scanner mobile app is application That helps you scan your order and position and to know if there are exact or not. it's cross-platform app.

Concircle scanner mobile app ⭐ Star on GitHub — it motivates Me a lot! Concircle scanner mobile app is application That helps you scan your order and

Aymen Ouerghui 10 May 7, 2022
This is a single page application that includes three pages; Home, Calculator and Quotes. You can do Math Calculations and read quotes.

Math magicians app This is a single page application that includes three pages; Home, Calculator and Quotes. You can do Math Calculations and read quo

Lynette Acholah 12 Jun 7, 2022
A small application to categorize and track your income and expenses.

Expense Tracker App with Typescript A small application to categorize and track your income and expenses. Expense Tracker App Demo Link You can check

Özge Coşkun Gürsucu 22 Jul 1, 2022