{"id":19605116,"url":"https://github.com/a7ul/react-super-accordion","last_synced_at":"2026-04-19T02:03:27.807Z","repository":{"id":57345928,"uuid":"122027195","full_name":"a7ul/react-super-accordion","owner":"a7ul","description":"A hackable super simple accordion that you can customise completely to the core. It can't get more customisable than this.","archived":false,"fork":false,"pushed_at":"2018-02-19T17:38:30.000Z","size":187,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-17T20:04:47.094Z","etag":null,"topics":["accordion","component","customizable","hackable","open-library","react","simple"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a7ul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-19T06:38:50.000Z","updated_at":"2018-02-19T22:03:36.000Z","dependencies_parsed_at":"2022-09-18T09:01:33.347Z","dependency_job_id":null,"html_url":"https://github.com/a7ul/react-super-accordion","commit_stats":null,"previous_names":["master-atul/react-super-accordion"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/a7ul/react-super-accordion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-super-accordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-super-accordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-super-accordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-super-accordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a7ul","download_url":"https://codeload.github.com/a7ul/react-super-accordion/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a7ul%2Freact-super-accordion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260466714,"owners_count":23013548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","component","customizable","hackable","open-library","react","simple"],"created_at":"2024-11-11T09:41:14.450Z","updated_at":"2026-04-19T02:03:27.775Z","avatar_url":"https://github.com/a7ul.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-super-accordion ![npm](https://img.shields.io/npm/dm/react-super-accordion.svg)\n\n[![https://nodei.co/npm/react-super-accordion.png?downloads=true\u0026downloadRank=true\u0026stars=true](https://nodei.co/npm/react-super-accordion.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/react-super-accordion)\n\n\nA hackable super simple accordion that you can customise completely to the core. It can't get more customisable than this.\n\n\n### Installation:\n\n`yarn add react-super-accordion`\n\nor\n\n`npm i react-super-accordion --save`\n\n\n### Usage\n\nBasic usage: \n```jsx\nimport React, { Component } from 'react';\nimport Accordion from 'react-super-accordion';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv style={{width: 300, textAlign:'center'}}\u003e\n        \u003cAccordion headText=\"This is the accordion head\"\u003e\n         Lorem ipsum dolor sit amet,\n         consectetur adipiscing elit, \n         sed do eiusmod tempor incididunt ut \n         labore et dolore magna aliqua. Ut enim ad minim veniam, \n         quis nostrud exercitation ullamco laboris nisi \n         ut aliquip ex ea commodo consequat.\n         Duis aute irure dolor in reprehenderit in voluptate \n         velit esse cillum dolore eu fugiat nulla pariatur       \n         \u003c/Accordion\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n\n```\n![Basic Usage screen](https://github.com/master-atul/react-super-accordion/raw/master/screens/basic_usage.png)\n\n\n### Event Handler\n\nAccordion also has a prop `onToggle` which can be used to pass in a callback function to execute when the accordion is toggled.\n\n```jsx\n\u003cAccordion headText=\"Hello World\" onToggle={(state)=\u003econsole.log(state)}\u003e\n...some body...\n\u003c/Accordion\u003e\n```\n\nThe above example would print on the console the state of the accordion on toggle\n```\n{expanded: true} // when the accordion expands\n```\n\n### CUSTOMIZATION\n\n**Customizing the body of the accordion**: Since the body is a text/component that you provide, this one is pretty straight forward. Just add any component as the child for Accordion and that becomes the body. so Body is under your complete control.\n```jsx\n\u003cAccordion headText=\"The head text of the accordion\"\u003e\n  \u003cCustomBodyComponent /\u003e  //Your custom body\n\u003c/Accordion\u003e\n```\n\n**Customizing the head of the accordion**: To customize the head of the accordion simply pass a Custom React component to the Accordion via the prop `headComponent` to render a custom Head component.\n\nFor example: \n```jsx\n\u003cAccordion headComponent={CustomHeadComponent}\u003e\n.... some body ...\n\u003c/Accordion\u003e\n```\n\nNote that Accordion would pass two props to the `CustomHeadComponent`\n\n1. expanded : This is a `Boolean` which specifies whether the accordion is in expanded state or collapsed state (true for expanded and false for collapsed).\n2. toggle : This is a function to toggle the expanded state of the accordion. \nEither you can directly call toggle like `toggle()` - In which case it will just toggle the state of accordion\nor \nYou can optionally pass a boolean to the `toggle(true)` to make the Accordion expand or `toggle(false)` to make the accordion collapse.\n\n\n**Complete example for a custom Accordion Head**\n\n```jsx\nimport React, { Component } from 'react';\nimport Accordion from 'react-super-accordion';\n\nconst styles = {\n    container : {\n    flex: 1,\n    backgroundColor:'lightseagreen',\n    color:'white',\n    borderRadius:'15px',\n    display: 'flex',\n    border: '1px solid lightgrey',\n    padding: '10px',\n    cursor: 'pointer',\n    fontFamily: 'helvetica',\n    fontWeight: 'bold',\n    userSelect: 'none',\n    flexDirection: 'row',\n  },\n  sideArrowExpanded : {\n    textAlign: 'right',\n    transition: 'transform 0.25s',\n  },\n  sideArrow : {\n    textAlign: 'right',\n    transform: 'rotateZ(-180deg)',\n    transition: 'transform 0.25s',\n  },\n  title : {\n    display: 'flex',\n    flexGrow: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n  }\n}\n//CREATING A CUSTOM HEAD COMPONENT \nclass CustomHeadComponent extends React.Component {\n  render(){\n    const {text, ...accorionProps} = this.props;\n    const {expanded, toggle} = accorionProps; //Basically Accordion would pass two props to the custom header 1. expanded 2. toggle \n    return (\n      \u003cdiv onClick={() =\u003e toggle()} style={styles.container} \u003e\n      \u003cdiv style={styles.title}\u003e\n        {text || 'Hello World'}\n      \u003c/div\u003e\n      \u003cdiv style={expanded ? styles.sideArrowExpanded : styles.sideArrow}\u003e\n        ⌃\n      \u003c/div\u003e\n    \u003c/div\u003e\n    )\n  }\n}\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv style={{width: 300, textAlign:'center'}}\u003e\n        \u003cAccordion onToggle={console.log} headComponent={(props)=\u003e\u003cCustomHeadComponent toggle={()=\u003eprops.toggle()} expanded={props.expanded} text=\"My Custom Head\" /\u003e}\u003e\n        {/* OR */}\n        {/* \u003cAccordion onToggle={console.log} headComponent={(accordionProps)=\u003e\u003cCustomHeadComponent {...accordionProps} text={'My custom header'} /\u003e}\u003e */}\n        {/* OR even*/}\n        {/* \u003cAccordion onToggle={console.log} headComponent={CustomHeadComponent}\u003e */}\n         Lorem ipsum dolor sit amet,\n         consectetur adipiscing elit, \n         sed do eiusmod tempor incididunt ut \n         labore et dolore magna aliqua. Ut enim ad minim veniam, \n         quis nostrud exercitation ullamco laboris nisi \n         ut aliquip ex ea commodo consequat.\n         Duis aute irure dolor in reprehenderit in voluptate \n         velit esse cillum dolore eu fugiat nulla pariatur       \n         \u003c/Accordion\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\nThe above custom Accordion looks like this:\n\n![Basic Usage screen](https://github.com/master-atul/react-super-accordion/raw/master/screens/custom_usage.png)\n\n\n## CONTRIBUTORS\n\n- [Atul R](https://github.com/master-atul)\n\n\nPeace ! ✌🏻🍻\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa7ul%2Freact-super-accordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa7ul%2Freact-super-accordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa7ul%2Freact-super-accordion/lists"}