React Placards

• A placards component inspired from Stripe
• ANNOUNCE your own Custom Components
• Built with Typescript
• Styled with Styled Components

• Installation
• Getting Started
• Props
  • Item Type
  • Stacked Card Style Props
  • Top Card Style Props
  • Container Style Props
  • Passing custom height/width
  • Passing custom timing
  • Passing custom styling for Card
  • Change second and third card's background
• Meta

Installation

  yarn add react-placards

Getting Started

A default height and width is given to the component but is required to render the component: Refer

  import React from 'react';
  import { Placards } from 'react-placards'
  import {CustomComponents} from '../somepath/CustomComponentLibrary.js'
  function App() {
    const items = [
      {
        id: "content-types",
        content: "You can pass in a plain text string.",
      },
      {
        id: "custom-components",
        content: <CustomComponents
          heading="Custom Components"
          date="31-01-2021"
          description={"OR you can create your own custom components"}
          {...extraProps}
        />
      }, ...];
    return (
      <div className="App">
        <Placards
          items={items}
        />
      </div>
    );
  }
  export default App;

Props

| name | description | required | default | | --------------- | ----------------------------------------------------------------------------- | -------- | ------------------------------------------------------------- | | items | collection of Item Type | true | [] | | width | width of the component | false | 200 | | height | height of the component | false | 200 | | timing | delay between card switch | false | 5000 | | cardStyles | style definitions for Top Card Style Props | false | check Top Card Style Props | | stackCardStyles | style definitions for Stacked Cards Style Props | false | check Stacked Cards Style Props | | containerStyles | style definitions for Container Style Props | false | check Container Style Props |

Item Type

| name | description | required | type | | ------- | -------------------------------------------- | -------- | ------------------------------ | | id | unique key for each component being rendered | true | string | | content | content that renders inside the cards | true | string or custom Component |

items = [
  {
    id: 'unique-id',
    content: <MyCustomComponent {...props} />
  },
  {
    id: 'unique-id-2',
    content: 'Text content'
  }
];

Top Card Style Props

Use the props below to change the styles of top card.

Note: Top card's styles will be applied to all the item's content

For more control on styles, reset the default styles and create your own Custom Card component

| name | description | required | default | | --------------- | ---------------------------------------------- | -------- | ------------------------------------------------------------------ | | backgroundColor | background-color applied to top card | false | #ffffff | | borderRadius | border-radius applied to ALL sides of top card | false | 0px | | boxShadow | box-shadow behind top card | false | 0 15px 35px rgba(50, 50, 93, 0.1),0 5px 15px rgba(0, 0, 0, 0.07) | | padding | padding applied to top card | false | 0px |

cardStyles = {
  backgroundColor: 'red',
  borderRadius: '4px',
  boxShadow: '0 10px 30px black',
  padding: '10px'
};

Stacked Card Style Props

| name | description | required | default | | ----------- | --------------------------------------- | -------- | --------- | | secondColor | background-color applied to second card | false | #f0f0f0 | | thirdColor | background-color applied to third card | false | #fafafa |

stackCardStyles = {
  secondColor: 'red',
  thirdColor: 'yellow'
};

Container Style Props

use these to place your cards inside the container

| name | description | required | default | | -------- | ------------------------- | -------- | ------- | | height | height of the container | false | 200px | | width | width of the container | false | 200px | | overflow | overflow of the container | false | hidden | | padding | padding of the container | false | 5% |

stackCardStyles = {
  height: 200,
  width: 200,
  overflow: 'hidden',
  padding: '5%'
};

Passing custom height/width

By default height & width have been set to 200px. Overide them by passing custom values.

<Placards items={items} width="400" height="400" />

Passing custom timing

By default timing has been set to 5000ms. Overide it by passing custom timing.

<Placards items={items} timing="7000" />

Passing custom styling for Card

Override cardStyles by passing custom styles

<Placards
  items={items}
  cardStyles={{
    padding: '10px',
    borderRadius: '4px',
    ...moreProperties
  }}
/>

Change second and third card's background

Override background colors of second and third cards

<Placards
  items={items}
  stackCardStyles={{
    secondColor: 'red',
    thirdColor: 'yellow'
  }}
/>

Meta

Inspired from Stripe's Announcement Banners. (Sadly has been removed now :'( )

Distributed under the MIT license. See LICENSE for more information.