@opuscapita/react-cards

OpusCapita cards

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
11Nov 13, 2018Aug 14, 2017Minified + gzip package size for @opuscapita/react-cards in KB

Readme

react-cards

Description

Contains Cards component that is a scrollable container for cards. Inside this container there can be any number of Card components that can contain both or one of CardHeader and CardContent.

Cards can be expanded and collapsed. In collapsed state the card content is hidden.

It's also possible to hide all except specific card.

Installation

npm install @opuscapita/react-cards

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

API

Cards

Prop name Type Default Description
children Card false Card components

Card

Prop name Type Default Description
id string false Unique ID for the card
expanded boolean false Card's expanded state
setExpanded(cardId: string, status: boolean) function false Set card's expanded state
showOnlyCard string false Show only card with this ID

CardHeader

Prop name Type Default Description
children Any false Card header content

CardContent

Prop name Type Default Description
children Any false Card content

Code example

import React from 'react';
import { Cards, Card, CardHeader, CardContent } from '@opuscapita/react-cards';

class MyCardsView extends React.Component {
  constructor() {
    super();
    this.state = {
      expanded: true,
    };
  }

  setExpanded = (cardId, status) => {
    this.setState({
      expanded: status,
    });
  }

  render() {
    return (
      <div id="my-cards-view">
        <Cards>
          <Card
            id="my-card"
            expanded={this.state.expanded}
            setExpanded={this.setExpanded}
            showOnlyCard={'my-card'}
          >
            <CardHeader>I'm card header</CardHeader>
            <CardContent>I'm card content</CardContent>
          </Card>
        </Cards>
      </div>
    );
  }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.