@radix-ui/react-presence
Advanced tools
@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.
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>
);
}
```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 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 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.
react-presence$ yarn add @radix-ui/react-presence
# or
$ npm install @radix-ui/react-presence
This is an internal utility, not intended for public usage.
FAQs
This is an internal utility, not intended for public usage.
The npm package @radix-ui/react-presence receives a total of 13,972,622 weekly downloads. As such, @radix-ui/react-presence popularity was classified as popular.
We found that @radix-ui/react-presence demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers 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.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.
Security News
New CNA status enables OpenJS Foundation to assign CVEs for security vulnerabilities in projects like ESLint, Fastify, Electron, and others, while leaving disclosure responsibility with individual maintainers.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.