šŸš€ Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket

mui-scroll-trigger

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mui-scroll-trigger

Simple and convenient scroll-based transitions for React apps using MUI v5.

0.1.1
latest
Source
npm
Version published
Maintainers
1
Created
Source

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

Basically, this component turns this...

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>
  )
}

...into this...

import ScrollTrigger from 'mui-scroll-trigger'

export default function App() {
  return (
    <ScrollTrigger threshold={400}>
      <div>Hello</div>
    </ScrollTrigger>
  )
}

šŸŽ‰ 🄳 šŸ‘Æā€ā™€ļø

...but with more options.

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>

Props

NameTypeDefaultDescription
children*elementElement that shall be transitioned... required
disabledboolfalseWhether or not to disable the transition.
ignoreDirectionboolfalseIgnore the scroll direction when determining whether to apply the transition. Maps to MUI useScrollTrigger disableHysteresis option.
onScrollstring'hide'Whether to 'show' or 'hide' (transition in or out) at the scroll threshold.
targetnodewindowTarget to base scroll distance on. You normally won't need to use this, unless in iframes or similar.
thresholdnumber100Apply the chosen transition when the vertical scroll strictly crosses this threshold (exclusive).
transitionstring'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.

License

Ā© benmneb

ISC License

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.

Keywords

material-ui

FAQs

Package last updated on 09 Oct 2021

Did you know?

Socket

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.

Install

Related posts