
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600Ć Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600Ć faster than humans.
mui-scroll-trigger
Advanced tools
Simple and convenient scroll-based transitions for React apps using MUI v5.
mui-scroll-trigger
Simple and convenient scroll-based transitions for React apps using MUI v5.
Demo Sandboxes:
"Back to Top" Button |
Hide App Bar |
Elevate App Bar
import useScrollTrigger from '@mui/material/useScrollTrigger';
import Grow from '@mui/material/Grow
function HideOnScroll(props) {
const { children } = props;
const trigger = useScrollTrigger({ threshold: 400 });
return (
<Grow in={!trigger}>
{children}
</Grow>
);
}
export default function App() {
return (
<HideOnScroll>
<div>Hello</div>
</HideOnScroll>
)
}
import ScrollTrigger from 'mui-scroll-trigger'
export default function App() {
return (
<ScrollTrigger threshold={400}>
<div>Hello</div>
</ScrollTrigger>
)
}
Want to use a different transition? The transition
prop accepts any of the MUI v5 transitions as lowercase strings.
<ScrollTrigger transition="zoom">
<div>Zoomed Hello</div>
</ScrollTrigger>
You can control whether the child element will transition in or out once the threshold is met with the onScroll
prop. It accepts either "hide" or "show" and defaults to "hide".
<ScrollTrigger onScroll="show">
<div>I will appear once the scroll threshold is met</div>
</ScrollTrigger>
You can conditionally disable the transition (ie. when a modal is open) and preserve it's current state with the disabled
prop.
<ScrollTrigger disabled={someCondition}>
<div>I will not transition while `someCondition` is true</div>
</ScrollTrigger>
Name | Type | Default | Description |
---|---|---|---|
children* | element | Element that shall be transitioned... required | |
disabled | bool | false | Whether or not to disable the transition. |
ignoreDirection | bool | false | Ignore the scroll direction when determining whether to apply the transition. Maps to MUI useScrollTrigger disableHysteresis option. |
onScroll | string | 'hide' | Whether to 'show' or 'hide' (transition in or out) at the scroll threshold . |
target | node | window | Target to base scroll distance on. You normally won't need to use this, unless in iframes or similar. |
threshold | number | 100 | Apply the chosen transition when the vertical scroll strictly crosses this threshold (exclusive). |
transition | string | 'grow' | MUI transition to apply at the threshold . Accepts one of 'slide', 'grow', 'zoom', 'collapse' or 'fade'. |
* required prop
Any other props (eg. easing
, timeout
) will be passed directly to the chosen MUI transition component. This means you can also use any of the props of the Transition component from react-transition-group.
The ignoreDirection
(disableHysteresis), target
and threshold
props work just like in the MUI useScrollTrigger hook.
Ā© benmneb
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
FAQs
Simple and convenient scroll-based transitions for React apps using MUI v5.
The npm package mui-scroll-trigger receives a total of 0 weekly downloads. As such, mui-scroll-trigger popularity was classified as not popular.
We found that mui-scroll-trigger demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.Ā It has 1 open source maintainer 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
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600Ć faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.