{"id":16701155,"url":"https://github.com/scriptex/react-accordion-ts","last_synced_at":"2025-04-10T04:05:50.552Z","repository":{"id":37774139,"uuid":"152040453","full_name":"scriptex/react-accordion-ts","owner":"scriptex","description":"A collapsible widget for React","archived":false,"fork":false,"pushed_at":"2025-03-29T00:29:49.000Z","size":5313,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-10T04:05:47.277Z","etag":null,"topics":["accordion","accordion-widget","collapsible","collapsible-component","react-component"],"latest_commit_sha":null,"homepage":"https://react-accordion-ts.atanas.info/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scriptex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["scriptex"],"patreon":"atanas","open_collective":null,"ko_fi":"scriptex","tidelift":null,"community_bridge":null,"liberapay":"scriptex","issuehunt":"scriptex","otechie":null,"custom":["paypal.me/scriptex","revolut.me/scriptex"]}},"created_at":"2018-10-08T07:57:36.000Z","updated_at":"2025-03-29T00:29:52.000Z","dependencies_parsed_at":"2023-02-16T21:15:27.556Z","dependency_job_id":"f5225b92-7733-4df4-a9e9-f2130c99a77b","html_url":"https://github.com/scriptex/react-accordion-ts","commit_stats":{"total_commits":849,"total_committers":9,"mean_commits":94.33333333333333,"dds":0.3521790341578327,"last_synced_commit":"c9256ffc6e98ae4f57f46bf9d6da6a16b0a8dc85"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-accordion-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-accordion-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-accordion-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scriptex%2Freact-accordion-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scriptex","download_url":"https://codeload.github.com/scriptex/react-accordion-ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154983,"owners_count":21056543,"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","accordion-widget","collapsible","collapsible-component","react-component"],"created_at":"2024-10-12T18:29:02.347Z","updated_at":"2025-04-10T04:05:50.533Z","avatar_url":"https://github.com/scriptex.png","language":"TypeScript","readme":"[![Travis CI](https://travis-ci.com/scriptex/react-accordion-ts.svg?branch=master)](https://travis-ci.com/scriptex/react-accordion-ts)\n[![Github Build](https://github.com/scriptex/react-accordion-ts/workflows/Build/badge.svg)](https://github.com/scriptex/react-accordion-ts/actions?query=workflow%3ABuild)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/34d3d75710534dc6a38c3584a1dcd068)](https://www.codacy.com/gh/scriptex/react-accordion-ts/dashboard?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=scriptex/react-accordion-ts\u0026utm_campaign=Badge_Grade)\n[![Codebeat Badge](https://codebeat.co/badges/d765a4c8-2c0e-44f2-89c3-fa364fdc14e6)](https://codebeat.co/projects/github-com-scriptex-react-accordion-ts-master)\n[![CodeFactor Badge](https://www.codefactor.io/repository/github/scriptex/react-accordion-ts/badge)](https://www.codefactor.io/repository/github/scriptex/react-accordion-ts)\n[![DeepScan grade](https://deepscan.io/api/teams/3574/projects/5257/branches/40799/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=3574\u0026pid=5257\u0026bid=40799)\n[![Analytics](https://ga-beacon-361907.ew.r.appspot.com/UA-83446952-1/github.com/scriptex/react-accordion-ts/README.md?pixel)](https://github.com/scriptex/react-accordion-ts/)\n\n# React Accordion\n\n\u003e An accordion widget for React web applications written in Typescript.\n\n## Visitor stats\n\n![GitHub stars](https://img.shields.io/github/stars/scriptex/react-accordion-ts?style=social)\n![GitHub forks](https://img.shields.io/github/forks/scriptex/react-accordion-ts?style=social)\n![GitHub watchers](https://img.shields.io/github/watchers/scriptex/react-accordion-ts?style=social)\n![GitHub followers](https://img.shields.io/github/followers/scriptex?style=social)\n\n## Code stats\n\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/scriptex/react-accordion-ts)\n![GitHub repo size](https://img.shields.io/github/repo-size/scriptex/react-accordion-ts?style=plastic)\n![GitHub language count](https://img.shields.io/github/languages/count/scriptex/react-accordion-ts?style=plastic)\n![GitHub top language](https://img.shields.io/github/languages/top/scriptex/react-accordion-ts?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/scriptex/react-accordion-ts?style=plastic)\n\n## About\n\nThis is a collapsible widget for React web applications written in TypeScript without any external dependencies (except React of course).\n\nIt uses the Hooks API and CSS to animate the collapsible contents.\n\nThe latest version of the widget has been built using the Hooks API introduced with React 16.\nIf you need to support older versions of React, please install [an older version](https://www.npmjs.com/package/react-accordion-ts/v/0.2.0).\n\n**Please note that this widget does NOT work with React Native.**\n\n[You can see the demo here](https://react-accordion-ts.atanas.info/)\n\n## Install\n\n```sh\nnpm i react-accordion-ts\n\n# or\n\nyarn add react-accordion-ts\n```\n\n## Usage\n\n```javascript\nimport * as React from 'react';\nimport { Accordion } from 'react-accordion-ts';\n\nconst content = 'Lorem ipsum, dolor sit amet consectetur adipisicing elit.';\n\nconst news = [\n\t{\n\t\tdate: '12-10-2018',\n\t\ttitle: 'Awesome title',\n\t\tcontent: [content]\n\t},\n\t{\n\t\tdate: '13-10-2018',\n\t\ttitle: 'Awesome title',\n\t\tcontent: [content, content],\n\t\topen: true\n\t},\n\t{\n\t\tdate: '13-10-2018',\n\t\ttitle: 'Awesome title',\n\t\tcontent: [content],\n\t\topen: true\n\t}\n];\n\nconst items = news.map(({ open, date, title, content }) =\u003e ({\n\topen,\n\ttitle: \u003ch2\u003e{date + ' - ' + title}\u003c/h2\u003e,\n\tcontent: (\n\t\t\u003c\u003e\n\t\t\t{content.map((item: string, index: number) =\u003e (\n\t\t\t\t\u003cp key={index}\u003e{item}\u003c/p\u003e\n\t\t\t))}\n\t\t\u003c/\u003e\n\t)\n}));\n\nexport const MyComponent = () =\u003e \u003cAccordion items={items} duration={300} multiple={true} /\u003e;\n```\n\nYou can also use the basic stylesheet included:\n\n```javascript\nimport 'react-accordion-ts/src/panel.css';\n```\n\nor\n\n```css\n@import 'react-accordion-ts/src/panel.css';\n\n// If the above doesn't work, add a ~ in the beginning:\n\n@import '~react-accordion-ts/src/panel.css';\n```\n\n## Props\n\n### Accordion props\n\n| Prop       | Type              | Required | Default | Description                                                              |\n| ---------- | ----------------- | -------- | ------- | ------------------------------------------------------------------------ |\n| `open`     | `number`          | false    | -1      | Zero based index representing the accordion item which is initially open |\n| `items`    | `AccordionItem[]` | true     | -       | Array of `AccordionPanel` objects (see below)                            |\n| `duration` | `number`          | false    | 300     | Duration (in milliseconds) of the expanding/collapsing animation         |\n| `multiple` | `boolean`         | false    | false   | A ReactNode representing the content of the slide                        |\n\n### Accordion panel props\n\n| Prop      | Type        | Required | Description                                                                            |\n| --------- | ----------- | -------- | -------------------------------------------------------------------------------------- |\n| `open`    | `boolean`   | false    | Whether the panel should be initially open                                             |\n| `title`   | `ReactNode` | true     | The title of the panel. This is the element which expands/collapses the panel on click |\n| `content` | `ReactNode` | true     | The panel content.                                                                     |\n\n## LICENSE\n\nMIT\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    Connect with me:\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/logo.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"mailto:hi@atanas.info\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/email.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.linkedin.com/in/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linkedin.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://github.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/github.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://gitlab.com/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/gitlab.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://twitter.com/scriptexbg\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/twitter.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.npmjs.com/~scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/npm.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://www.youtube.com/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/youtube.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://stackoverflow.com/users/4140082/atanas-atanasov\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/stackoverflow.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://codepen.io/scriptex/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codepen.svg\" width=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://profile.codersrank.io/user/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/codersrank.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n    \u0026nbsp;\n    \u003ca href=\"https://linktr.ee/scriptex\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/scriptex/socials/master/styled-assets/linktree.svg\" height=\"20\" alt=\"\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\nSupport and sponsor my work:\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20developer%20profile%3A\u0026url=https%3A%2F%2Fgithub.com%2Fscriptex\u0026via=scriptexbg\u0026hashtags=software%2Cgithub%2Ccode%2Cawesome\" title=\"Tweet\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Tweet-Share_my_profile-blue.svg?logo=twitter\u0026color=38A1F3\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://paypal.me/scriptex\" title=\"Donate on Paypal\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?logo=paypal\u0026color=222d65\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://revolut.me/scriptex\" title=\"Donate on Revolut\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/revolut.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://patreon.com/atanas\" title=\"Become a Patron\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?logo=patreon\u0026color=e64413\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://ko-fi.com/scriptex\" title=\"Buy Me A Coffee\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Donate-Buy%20me%20a%20coffee-yellow.svg?logo=ko-fi\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://liberapay.com/scriptex/donate\" title=\"Donate on Liberapay\"\u003e\n\t\u003cimg src=\"https://img.shields.io/liberapay/receives/scriptex?label=Donate%20on%20Liberapay\u0026logo=liberapay\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" title=\"Donate Bitcoin\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/bitcoin.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" title=\"Donate Etherium\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/etherium.json\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" title=\"Donate Shiba Inu\"\u003e\n\t\u003cimg src=\"https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/scriptex/scriptex/master/badges/shiba-inu.json\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/scriptex","https://patreon.com/atanas","https://ko-fi.com/scriptex","https://liberapay.com/scriptex","https://issuehunt.io/r/scriptex","paypal.me/scriptex","revolut.me/scriptex","https://paypal.me/scriptex","https://liberapay.com/scriptex/donate"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Freact-accordion-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscriptex%2Freact-accordion-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscriptex%2Freact-accordion-ts/lists"}