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.
To use the PearsonAccordion in your React project, follow these steps:
First, install the React wrapper component:
npm install @pearson-ux/accordion-reactSince 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:
<!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>Now, you can use the PearsonAccordion component in your React application.
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;-
theme: Specifies the theme of the accordion. Accepted values are based on the Pearson design system, such asp-plus.
The PearsonAccordion component allows for easy customization using different themes. To change the appearance, simply adjust the theme prop:
<PearsonAccordion theme="p-com">
<AccordionItem label="Section 1">Content for section 1</AccordionItem>
<AccordionItem label="Section 2">Content for section 2</AccordionItem>
</PearsonAccordion>Here's a complete example:
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;- The Web Component script is a required dependency. Ensure the script tag is included in the
public/index.htmlfile. - The
themeprop should match one of the pre-defined themes in the Pearson design system.