![New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions](https://cdn.sanity.io/images/cgdhsj6q/production/86e6ebdea652d20da070ebbda20134b839972db7-1024x1024.webp?w=800&fit=max&auto=format)
Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
@cher-ami/transitions-mananger
Advanced tools
Readme
Transitions manager allows to handle and dispatch transition states from anywhere in the application.
npm i @cher-ami/transitions-manager
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.
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()
}
})
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
@wbe/debug is used on this project. It allows to easily get logs informations on development and production modes.
localStorage.debug = "TransitionsManager:*"
Header.transitionsManager = new TransitionsManager({ name: "Header" })
mount(): Promise<void>
mountComplete(): void
unmount(): Promise<void>
unmountComplete(): void
playIn(): Promise<void>
playInComplete(): void
playOut(): Promise<void>
playOutComplete(): void
npm i
Start dev server
npm run dev
FAQs
Transitions manager allows to handle and dispatch transition states from anywhere in the application
We found that @cher-ami/transitions-mananger demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.