open-index/open-npm huggingface dataset:
npm package: @pearson-ux/accordion-react
Description: The `PearsonAccordion` component is a React wrapper for the Pearson Accordion Web Component. This component allows you to create a styled accordion with themes provided by Pearson. The component uses a custom web component under the hood, which you need t
Latest version: 1.0.9
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.


# PearsonAccordion Component

The `PearsonAccordion` component is a React wrapper for the Pearson Accordion Web Component. This component allows you to create a styled accordion with themes provided by Pearson. The component uses a custom web component under the hood, which you need to include as a dependency in your project.

## Installation

To use the `PearsonAccordion` in your React project, follow these steps:

### 1. Install the package

First, install the React wrapper component:

```bash
npm install @pearson-ux/accordion-react
```

### 2. Include the Web Component Script

Since the Pearson Accordion is a custom web component, you need to include the script for it in your project. Add the following script tag in the `<head>` section of your `public/index.html` file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Other head content -->

    <script type="module" src="https://unpkg.com/@pearson-ux/accordion@3.0.12/accordion.js"></script>
</head>
<body>
    <div id="root"></div>
    <!-- Other body content -->
</body>
</html>
```

### 3. Usage

Now, you can use the `PearsonAccordion` component in your React application.

```jsx
import React from 'react';
import PearsonAccordion, { AccordionItem } from '@pearson-ux/accordion-react';

const App = () => (
    <PearsonAccordion theme="p-plus">
      <AccordionItem label="Section 1">Content for section 1</AccordionItem>
      <AccordionItem label="Section 2">Content for section 2</AccordionItem>
    </PearsonAccordion>
);

export default App;
```

### 4. Props

- `theme`: Specifies the theme of the accordion. Accepted values are based on the Pearson design system, such as `p-plus`.

### 5. Customization

The `PearsonAccordion` component allows for easy customization using different themes. To change the appearance, simply adjust the `theme` prop:

```jsx
<PearsonAccordion theme="p-com">
    <AccordionItem label="Section 1">Content for section 1</AccordionItem>
    <AccordionItem label="Section 2">Content for section 2</AccordionItem>
</PearsonAccordion>
```

## Example

Here's a complete example:

```jsx
import React from 'react';
import PearsonAccordion, { AccordionItem } from '@pearson-ux/accordion-react';

const App = () => (
    <PearsonAccordion theme="p-plus">
      <AccordionItem label="Dave 1">Content for section 1</AccordionItem>
      <AccordionItem label="Section 2">Content for section 2</AccordionItem>
    </PearsonAccordion>
);

export default App;
```

## Notes

- The Web Component script is a required dependency. Ensure the script tag is included in the `public/index.html` file.
- The `theme` prop should match one of the pre-defined themes in the Pearson design system.