@radix-ui/react-presence

What is @radix-ui/react-presence?

@radix-ui/react-presence is a utility component for managing the presence of elements in the DOM. It helps in handling the mounting and unmounting of components with animations or transitions, making it easier to manage component lifecycles in a React application.

What are @radix-ui/react-presence's main functionalities?

Presence

The `Presence` component is used to conditionally render its children based on the `present` prop. This is useful for managing the presence of elements in the DOM, especially when combined with animations or transitions.

```jsx
import { Presence } from '@radix-ui/react-presence';

function Example() {
  const [isVisible, setIsVisible] = React.useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Presence
      </button>
      <Presence present={isVisible}>
        <div className="content">Hello, I am here!</div>
      </Presence>
    </div>
  );
}
```

Other packages similar to @radix-ui/react-presence

react-transition-group

react-transition-group provides a set of components for managing component lifecycles and animations. It offers more comprehensive solutions for animations and transitions compared to @radix-ui/react-presence, including CSSTransition, TransitionGroup, and more.

framer-motion

framer-motion is a powerful library for animations in React. It provides a wide range of animation capabilities, including keyframes, spring animations, and gesture-based animations. It is more feature-rich compared to @radix-ui/react-presence, which focuses primarily on presence management.

react-spring

react-spring is a spring-physics-based animation library for React. It allows for complex animations and transitions with a focus on performance and ease of use. While @radix-ui/react-presence is more about managing the presence of elements, react-spring provides more advanced animation capabilities.

README

react-presence

Installation

$ yarn add @radix-ui/react-presence
# or
$ npm install @radix-ui/react-presence

Usage

This is an internal utility, not intended for public usage.