@pearson-ux/accordion-react

v1.0.9

Published

a month ago

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

Downloads

198

0High
0Medium
0Low

pearson-ux

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:

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:

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

    <script type="module" src="https://unpkg.com/@pearson-ux/[email protected]/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.

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:

<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:

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme