Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@szhsin/react-accordion

Package Overview
Dependencies
Maintainers
0
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@szhsin/react-accordion

The complete accordion solution for React.

  • 1.3.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

React-Accordion

An unstyled, accessible accordion library for React apps and design systems.

Examples and Docs

NPM NPM

Features

  • Unstyled React accordion components
  • React hooks for Headless usage
  • WAI-ARIA compliant
  • Keyboard navigable
  • Support animation
  • Can be controlled or uncontrolled
  • Control to expand/collapse specific item or all items
  • Level 3 support of React 18 concurrent rendering
  • Support server-side rendering
  • Small and tree-shakable (~3kB)
  • Strongly typed API with TypeScript

react accordion

Install

with npm

npm install @szhsin/react-accordion

or with Yarn

yarn add @szhsin/react-accordion

Usage

import { Accordion, AccordionItem } from '@szhsin/react-accordion';

export default function Example() {
  return (
    <Accordion>
      <AccordionItem header="What is Lorem Ipsum?">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </AccordionItem>

      <AccordionItem header="Where does it come from?">
        Quisque eget luctus mi, vehicula mollis lorem. Proin fringilla
        vel erat quis sodales. Nam ex enim, eleifend venenatis lectus
        vitae, accumsan auctor mi.
      </AccordionItem>

      <AccordionItem header="Why do we use it?">
        Suspendisse massa risus, pretium id interdum in, dictum sit
        amet ante. Fusce vulputate purus sed tempus feugiat.
      </AccordionItem>
    </Accordion>
  );
}

Edit on CodeSandbox

Visit more examples and docs

License

MIT Licensed.

Keywords

FAQs

Package last updated on 09 Dec 2024

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

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc