Nightmarish Pawnshop Mystic
    Wondering what’s next for npm?Check out our public roadmap! »

    @opuscapita/react-cards

    2.0.2 • Public • Published

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

    Keywords

    none

    Install

    npm i @opuscapita/react-cards

    DownloadsWeekly Downloads

    20

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    1.4 MB

    Total Files

    44

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar