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);
}