pacocoursey / Use Delayed Render
react hook for delaying the render and unmount of a component
Stars: ✭ 62
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Use Delayed Render
Use Web Animations
😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.
Stars: ✭ 802 (+1193.55%)
Mutual labels: hook
React Intersection Visible Hook
React Hook to track the visibility of a functional component
Stars: ✭ 46 (-25.81%)
Mutual labels: hook
Droidplugin
A plugin framework on android,Run any third-party apk without installation, modification or repackage
Stars: ✭ 6,683 (+10679.03%)
Mutual labels: hook
Stinger
Stinger is a high-efficiency library with great compatibility, for aop in Objective-C, using libffi instead of Objective-C message forwarding. It is 20+ times faster than the Aspects, from message-sending to Aspect-oriented code ends.
Stars: ✭ 845 (+1262.9%)
Mutual labels: hook
Gameoverlay
🎮 GameOverlay using CEF with support for common rendering backends
Stars: ✭ 32 (-48.39%)
Mutual labels: hook
Interposekit
A modern library to swizzle elegantly in Swift.
Stars: ✭ 777 (+1153.23%)
Mutual labels: hook
Proxychains Ng
proxychains ng (new generation) - a preloader which hooks calls to sockets in dynamically linked programs and redirects it through one or more socks/http proxies. continuation of the unmaintained proxychains project. the sf.net page is currently not updated, use releases from github release page instead.
Stars: ✭ 7,553 (+12082.26%)
Mutual labels: hook
React Cool Inview
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
Stars: ✭ 830 (+1238.71%)
Mutual labels: hook
Use Measure
It's just a React hook for resize-observer, uses resize-observer-polyfill.
Stars: ✭ 24 (-61.29%)
Mutual labels: hook
Kirby Autofocus
Content aware image cropping for Kirby. Kirby 2 and 3.
Stars: ✭ 35 (-43.55%)
Mutual labels: hook
Robotgo
RobotGo, Go Native cross-platform GUI automation @vcaesar
Stars: ✭ 7,095 (+11343.55%)
Mutual labels: hook
Xpatch
免Root实现app加载Xposed插件工具。This is a tool to repackage apk file, then the apk can load any xposed modules installed in the device. It is another way to hook an app without root device.
Stars: ✭ 1,054 (+1600%)
Mutual labels: hook
Webhook
webhook is a lightweight incoming webhook server to run shell commands
Stars: ✭ 7,201 (+11514.52%)
Mutual labels: hook
Silence
A simple, clean macro recorder written in C#. Windows 10 compatible.
Stars: ✭ 29 (-53.23%)
Mutual labels: hook
S Mvp
🔥🔥优化版MVP,使用注解泛型简化代码编写,使用模块化协议方便维护,APT过程使用注解解析器利用JavaPoet🌝完成重复模块的编写,利用ASpect+GradlePlugin 完成横向AOP编程+Javassist动态字节码注入+Tinker实现热修复+Retrofit实现优雅网络操作+RxJava轻松玩转数据处理
Stars: ✭ 1,095 (+1666.13%)
Mutual labels: hook
useDelayedRender
useDelayedRender is a react hook for delaying the render and unmount of a component. This is commonly used to animate UI on unmount.
Installation
$ yarn add use-delayed-render
Usage
Function signature:
const { mounted: boolean, rendered: boolean } = useDelayedRender(
active: boolean,
options?: {
enterDelay: number,
exitDelay: number,
onUnmount: () => void
}
)
Options:
-
active
: Whether your component is in an active state -
enterDelay
: After mounting, the delay beforerendered
becomes true -
exitDelay
: Afterrendered
becomes false, the delay before unmounting -
onUnmount
: A callback triggered after unmounting
Return values:
-
mounted
: Whether your component should be mounted in the DOM -
rendered
: Whether your component should be visible
Example
Render a modal, but delay the unmount so that our 2 second CSS transition completes before the modal is removed from the DOM.
const Modal = ({ active }) => {
const { mounted, rendered } = useDelayedRender(active, {
exitDelay: 2000,
})
if (!mounted) return null
return (
<Portal>
<div className={rendered ? 'modal visible' : 'modal'}>{/* ... */}</div>
</Portal>
)
}
This allows you to use simple CSS transitions to animate the mounting/unmounting of your component.
.modal {
opacity: 0;
transition: opacity 2s ease;
}
.modal.visible {
opacity: 1;
}
Why?
- Usually you would use
react-transition-group
to solve this, but the 2.37MB install size is a bit overkill, compared to this package at 491B gzipped.
<Transition in={active} unmountOnExit timeout={200} onExited={handleExit}>
<Modal />
</Transition>
- Hooks solve the problem without needing a render function or HOC.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].