You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

use-presence

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-presence

A lightweight React hook to animate the presence of an element.


Version published
Weekly downloads
4.9K
increased by17.5%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

use-presence

Stable release

A 1kb React hook to animate the presence of an element.

Demo app

The problem

There are two problems that you have to solve when animating the presence of an element:

  1. During enter animations, you have to render an initial state where the element is hidden and only after this has flushed to the DOM, you can can animate the final state that the element should animate towards.
  2. Exit animations are a bit tricky in React, since this typically means that a component unmounts. However when the component has already unmounted, you can't animate it anymore. A workaround is often to keep the element mounted, but that keeps unnecessary elements around and can hurt accessibility, as hidden interactive elements might still be focusable.

This solution

This hook provides a lightweight solution where the animating element is only mounted the minimum of time, while making sure the animation is fully visible to the user. The rendering is left to the user to support all kinds of styling solutions.

Example

import usePresence from 'use-presence';

function Expander({children, isOpen, transitionDuration = 500}) {
  const {isMounted, isVisible, isAnimating} = usePresence(isOpen, {transitionDuration});

  if (!isMounted) {
    return null;
  }
  
  return (
    <div style={{
      overflow: 'hidden',
      maxHeight: 0,
      opacity: 0,
      transitionDuration: `${transitionDuration}ms`,
      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
      transitionProperty: 'max-height, opacity',
      ...(isVisible && {
        maxHeight: 500,
        opacity: 1,
        transitionTimingFunction: 'cubic-bezier(0.8, 0, 0.6, 1)'
      }),
      ...(isAnimating && {willChange: 'max-height, opacity'})
    }}>
      {children}
    </div>
  );
}

API

const {
  /** Should the component be returned from render? */
  isMounted,
  /** Should the component have its visible styles applied? */
  isVisible,
  /** Is the component either entering or exiting currently? */
  isAnimating,
  /** Is the component entering currently? */
  isEntering,
  /** Is the component exiting currently? */
  isExiting
} = usePresence(
  /** Indicates whether the component that the resulting values will be used upon should be visible to the user. */
  isVisible: boolean,
  opts: {
    /** Duration in milliseconds used both for enter and exit transitions. */
    transitionDuration: number;
    /** Duration in milliseconds used for enter transitions (overrides `transitionDuration` if provided). */
    enterTransitionDuration: number;
    /** Duration in milliseconds used for exit transitions (overrides `transitionDuration` if provided). */
    exitTransitionDuration: number;
    /** Opt-in to animating the entering of an element if `isVisible` is `true` during the initial mount. */
    initialEnter?: boolean;
  }
)

usePresenceSwitch

If you have multiple items where only one is visible at a time, you can use the supplemental usePresenceSwitch hook to animate the items in and out. Previous items will exit before the next item transitions in.

API

const {
  /** The item that should currently be rendered. */
  mountedItem,
  /** Returns all other properties from `usePresence`. */
  ...rest
} = usePresence<ItemType>(
  /** The current item that should be visible. If `undefined` is passed, the previous item will animate out. */
  item: ItemType | undefined,
  /** See the `opts` argument of `usePresence`. */
  opts: Parameters<typeof usePresence>[1]
)

Example

const tabs = [
  {
    title: 'Tab 1',
    content: 'Tab 1 content'
  },
  {
    title: 'Tab 2',
    content: 'Tab 2 content'
  },
  {
    title: 'Tab 3',
    content: 'Tab 3 content'
  },
];

function Tabs() {
  const [tabIndex, setTabIndex] = useState(0);

  return (
    <>
      {tabs.map((tab, index) => (
        <button key={index} onClick={() => setTabIndex(index)} type="button">
          {tab.title}
        </button>
      ))}
      <TabContent>
        {tabs[tabIndex].content}
      </TabContent>
    </>
  );
}

function TabContent({ children, transitionDuration = 500 }) {
  const {
    isMounted,
    isVisible,
    mountedItem,
  } = usePresenceSwitch(children, { transitionDuration });

  if (!isMounted) {
    return null;
  }

  return (
    <div
      style={{
        opacity: 0,
        transitionDuration: `${transitionDuration}ms`,
        transitionProperty: 'opacity',
        ...(isVisible && {
          opacity: 1
        })
      }}
    >
      {mountedItem}
    </div>
  );
}

FAQs

Package last updated on 13 Feb 2023

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc