Accordion

React + TypeScript + Vite

Navigation

• About Project
• Installation
• Properties
• Usage Examples
• CSS
• Life example

About Project

React Vite TypeScript Accordion is a lightweight and customizable React component that allows you to easily create accordion-style UI elements in your web applications. Powered by Vite and TypeScript, this accordion component is designed for modern development, offering fast performance and a type-safe development experience.

Installation

To install the package, you can use one of the following commands:

  npm install react-accordion-ts

  yarn add react-accordion-ts

  pnpm add react-accordion-ts

To import the component into your project:

import Accordion from 'react-accordion-ts';
  <Accordion
    items={items}
    initiallyOpenTab={[0, 1]}
    blockTab={[0, 1]}
    blockTabMsg="This tab is blocked"
    autoClose={false}
    transitionSpeed="0.6"
    iconRotate="540"
    iconType="arrow"
    iconTypeAnimation="translateY"
    headerDirection="row"
  />

Properties

items from .json file

import myAccordionData from "./myAccordionData.json";
    items={myAccordionData}

or .js/.ts file

import {myAccordionData} from "./myAccordionData";
    items={myAccordionData}

example of .json file

[
    {
        "id": "1", //could be string or number
        "question": "Who is it John Doe and Jane Doe?",
        "answer": "<a href='https://en.wikipedia.org/wiki/John_Doe' rel=\"noopener noreferrer\" target='_blank' >John Doe</a> and Jane Doe are placeholder names used in legal contexts and various other situations to refer to unidentified or anonymous individuals. They are generic names and do not represent specific people.\n\nThese names are typically used in legal documents, court cases, police reports, and other situations when the true identity of an individual is unknown, needs to be protected for privacy reasons, or when a hypothetical example is needed. By using these placeholder names, the actual identity of the person involved remains confidential, and the focus can be on the legal or procedural aspects of a case or situation rather than the specific individuals involved."
    }   
]

example of .js/ts file

export const myAccordionData = [
  {
    id: "1", //could be string or number
    question: "Who is it John Doe and Jane Doe?",
    answer: "<a href='https://en.wikipedia.org/wiki/John_Doe' rel=\"noopener noreferrer\" target='_blank' >John Doe</a> and Jane Doe are placeholder names used in legal contexts and various other situations to refer to unidentified or anonymous individuals. They are generic names and do not represent specific people.\n\nThese names are typically used in legal documents, court cases, police reports, and other situations when the true identity of an individual is unknown, needs to be protected for privacy reasons, or when a hypothetical example is needed. By using these placeholder names, the actual identity of the person involved remains confidential, and the focus can be on the legal or procedural aspects of a case or situation rather than the specific individuals involved."
  }
]

initiallyOpenTab

• initiallyOpenTab={[0, 1]} by index in the array. This tabs will be open by default.

<Accordion
    initiallyOpenTab={[0, 1]}
/>

blockTab

• blockTab={[0, 1]} by index in the array. This tabs will be blocked by default

<Accordion
    blockTab={[0, 1]}
/>

• ! if you use blockTabs, you can use blockTabMsg, nice point for mobile devices because you can't see cursor: not-allowed on mobile devices

blockTabMsg

• blockTabMsg="Tab is blocked" - default value.

<Accordion
    blockTab={[0, 1]}
    blockTabs="This tab is blocked"
/>

autoClose

• autoClose={true} - if you want to open only one tab and other tab will be closed automatically, default value.
• autoClose={false} - if you want to open tabs without closing other tabs.
• ! if you have blockTab you can't open them.
• ! if you have blockTab and initiallyOpenTab with the same index, you can't close them.

<Accordion
    blockTab={[0, 1]}
    blockTabs="This tab is blocked"
    autoClose={false}
/>

transitionSpeed

• transitionSpeed="0.6" value in the seconds.
• transitionSpeed="0.6" transition speed applied for icon and accordion height.
• range at 0 to 1 (or more).

<Accordion
    transitionSpeed="0.6"
/>

iconType

• iconType="plus" - default value.
• iconType="arrow" - if you want to use arrow icon.

<Accordion
    iconType="arrow"
/>

iconTypeAnimation rotate or translateY

• iconTypeAnimation="rotate" - default value.
• iconTypeAnimation="translateY" - if you want to use rotate animation. (only for plus icon)
• iconRotate='180' - value in the degrees.

<Accordion
    iconType="arrow"
    iconTypeAnimation="rotate"
    iconRotate='180' // or 180/-180 depend on side rotation
/>

<Accordion
    iconType="plus"
    iconTypeAnimation="rotate"
    iconRotate='-540' // 180/-180 or 540/-540 depend on side rotation
/>

<Accordion
    iconType="plus"
    iconTypeAnimation="translateY"
/>

headerDirection

• headerDirection="row" - default value.
• headerDirection="rewers" - if you want to have icon on the right side of header.

<Accordion
    headerDirection="rewers"
/>

CSS

• Use the Accordion inside your wrapper component, to define more suitable width of Accordion for your project.
• To add a styles to the accordion, you can use the following CSS classes:

.accordion_tab {} /* styles for wrapper for accordion tab */

.accordion_header {} /* styles for question and icon */

.accordion_title {} /* styles for question */

.accordion_icons {} /* styles for icons like background */

.accordion_icon {} /* styles for icon color(stroke: #color) and hover */

.accordion_answer {} /* styles for wrapper for answer */

.accordion_text {} /* styles for answer text */

.accordion_block_tab {} /* styles for blockTabMsg text */

CSS example

• copy and paste to the index.css file
• create accordion.css in the same folder as your A

.accord {
	display: grid;
	gap: 1rem;
	width: 70%;
	margin: 0 auto;
	outline: none;
}

.accordion_tab {
	-webkit-tap-highlight-color: transparent; /* for mobile devices hide blink of blue when click to accordion tab */
	border: 0.15rem solid #282626;
	/*box-shadow: 0 1px 0 0 rgba(0,0,0,0.65);*/
}

.accordion_header {
	align-items: center;
	padding: 1rem;
	gap: 1rem;
}

.accordion_title {
	margin-right: auto;
}

.icons {
	padding: 0.55rem;
	border-radius: 50%;
	border: 0.0125rem solid #3dadaa;
}

.accordion_icon {
	stroke: #3dadaa;
}

.accordion_answer {

}

.accordion_text {
	font-weight: bold;
	width: 90%;
	margin: 1rem auto;
}

.accordion_block_tab {
	color: red;
	font-weight: bold;
}

Life example

• Accordion - live example of the Accordion component isn't finished yet.