Full page (or set height) fancy React accordion

After doing Javascript 30 by Wes Bos, I decided to make his accordion (from lesson 5) a React component, with some tweaks! Enjoy.

Your React application will need to handle importing .css files (e.g. css-loader if using webpack), if you care to use the provided/default CSS.

You will need to set any parent elemnts height to 100% or 100vh, and not pass a height prop, if you wish to have a fullpage accordion.

CodeSandbox Demo

Install:

npm:

npm -i react-fullpage-accordion

yarn:

yarn add react-fullpage-accordion

Usage:

Optional/Recommended: import provided/default CSS

import "react-fullpage-accordion/dist/react-fullpage-accordion.css"

In Gatsby `gatsby-browser.js

import "react-fullpage-accordion/dist/react-fullpage-accordion.css"

Example

import React from 'react'
import { FullpageAccordion, Panel } from 'react-fullpage-accordion';

<FullpageAccordion height="500px">
    <Panel itemId="0" background={'https://source.unsplash.com/rFKUFzjPYiQ/1500x1500'}>
        <p>Give</p>
        <p>
            <a href="/duckPage">
                Duck!
            </a>
        </p>
        <p>a try!</p>
    </Panel>
    <Panel itemId="1" background={'https://source.unsplash.com/ITjiVXcwVng/1500x1500'}>
        <p>Give</p>
        <p>
            <a href="/oberynPage">
                Oberyn!
            </a>
        </p>
        <p>a try!</p>
    </Panel>
</FullpageAccordion>

Props for FullpageAccordion Component:

| prop | type | default | description | example | required | | ------ | ------ | -------------- | ----------------------------- | ------- | -------- | | height | string | 100% of parent | Height of the panel container | '500px' | |

Props for Panel Component:

| prop | type | default | description | example | required | | ---------- | ------ | ------- | ---------------- | --------------------------------------------------- | -------- | | itemId | string | n/a | Id for the Panel | '1', 'item-1' | X | | background | string | n/a | Image source | 'https://source.unsplash.com/ITjiVXcwVng/1500x1500' | |

Information

A Panel works best with three (3) children. We transition the first and last children into the panel on click, out again on the second click, or on another panel being clicked. Three children is recommended, but it is not a requirement. You can also override or provide your own CSS for the children, this is just the default behavior.

Class names

The following are the provided class names if you want to write your own CSS.

| class | description | | ---------------------- | ---------------- | | panels | Panel container | | panel | Indivitual panel | | panel open open-active | The active panel |

To transition the children our CSS uses the following:

.panel > *:first-child {
  transform: translateY(-100%);
}

.panel.open-active > *:first-child {
  transform: translateY(0);
}

.panel > *:last-child {
  transform: translateY(100%);
}

.panel.open-active > *:last-child {
  transform: translateY(0);
}