foldy v0.1.2

Foldy React Component

The React component that wraps list of components and creates a folding list.

You can see a demo at https://huyld.github.io/foldy-demo or play arround with the sample project at CodeSandbox.

Installation

This package requires peer dependency styled-components version >= 4.2.0 and react version >= 16.8.0

Issue the command

npm install foldy

Props

Structure

Each of the following component can be styled by applying properties to their CSS class.

FoldyList

Render list of FoldyItem components. CSS class: foldy-list.

FoldyItem

Wrapper for each item in list passed to Foldy component. CSS class: foldy-item. Specific item can be addressed with CSS class foldy-item--<order> (0-based index).

FoldyFront

Wrapper for the front element. It is rendered when foldy is collapsed. CSS class: foldy-front.

Customization

foldy allows customization by receiving customClass prop as user-defined CSS class. Beside CSS classes mentioned above for foldy components, These CSS selectors should come handy:

• .foldy > .foldy-item__content::after: the back face of each item.
• .foldy-list.open: class .open is attached to foldy when it's in open state.

Example

import Foldy from "foldy";

function Demo(props) {
  const list = Array.from(Array(5), (_, i) => <div>item {i}</div>);
  const front = <h1>This is displayed when Foldy is collapsed</h1>;

  return <>
    <Foldy
      front={front}
      list={list}
      duration={500}
      open={true}
      customClass="my-foldy"
    />
  </>;
}