Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@radix-ui/react-accordion
Advanced tools
@radix-ui/react-accordion is a React component library that provides accessible and customizable accordion components. It allows developers to create collapsible sections of content, which can be expanded or collapsed by the user. The package is designed with accessibility in mind and follows the WAI-ARIA guidelines.
Basic Accordion
This code demonstrates a basic accordion with two items. Each item has a trigger that, when clicked, expands or collapses the associated content.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@radix-ui/react-accordion';
function BasicAccordion() {
return (
<Accordion>
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
</Accordion>
);
}
Multiple Expandable Items
This code demonstrates an accordion where multiple items can be expanded at the same time. The 'type' prop is set to 'multiple' to enable this functionality.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@radix-ui/react-accordion';
function MultipleExpandableAccordion() {
return (
<Accordion type="multiple">
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
</Accordion>
);
}
Controlled Accordion
This code demonstrates a controlled accordion where the expanded item is managed by the component's state. The 'value' prop is used to control which item is expanded.
import { useState } from 'react';
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@radix-ui/react-accordion';
function ControlledAccordion() {
const [value, setValue] = useState('item-1');
return (
<Accordion value={value} onValueChange={setValue}>
<AccordionItem value="item-1">
<AccordionTrigger>Item 1</AccordionTrigger>
<AccordionContent>Content for item 1</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>Item 2</AccordionTrigger>
<AccordionContent>Content for item 2</AccordionContent>
</AccordionItem>
</Accordion>
);
}
react-accessible-accordion is a lightweight and accessible accordion component for React. It provides similar functionality to @radix-ui/react-accordion, focusing on accessibility and ease of use. It allows for both single and multiple item expansion and is highly customizable.
react-collapse is a React component for creating collapsible elements. While it does not provide a full accordion component out of the box, it can be used to build custom accordion-like components. It focuses on providing smooth animations and transitions for collapsing content.
react-bootstrap is a popular library that provides Bootstrap components for React, including an Accordion component. It offers a wide range of pre-styled components and utilities, making it easy to create responsive and accessible UIs. The Accordion component in react-bootstrap is similar in functionality to @radix-ui/react-accordion but comes with Bootstrap's styling and theming.
react-accordion
$ yarn add @radix-ui/react-accordion
# or
$ npm install @radix-ui/react-accordion
View docs here.
FAQs
Unknown package
The npm package @radix-ui/react-accordion receives a total of 1,097,265 weekly downloads. As such, @radix-ui/react-accordion popularity was classified as popular.
We found that @radix-ui/react-accordion 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.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.