![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@radix-ui/react-accordion
Advanced tools
Package description
@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.
Readme
react-accordion
$ yarn add @radix-ui/react-accordion
# or
$ npm install @radix-ui/react-accordion
View docs here.
FAQs
Unknown package
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.