{"id":13632530,"url":"https://github.com/cheersmas/react-placards","last_synced_at":"2025-04-18T02:33:34.506Z","repository":{"id":47034488,"uuid":"331725298","full_name":"cheersmas/react-placards","owner":"cheersmas","description":"A fancy placards component for React","archived":false,"fork":false,"pushed_at":"2024-02-19T16:16:29.000Z","size":3581,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T01:37:52.668Z","etag":null,"topics":["announcements","banners","cards","notifications","react","reactjs","reactjs-components"],"latest_commit_sha":null,"homepage":"https://cheersmas.github.io/react-placards","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cheersmas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-21T18:58:29.000Z","updated_at":"2024-02-19T16:16:27.000Z","dependencies_parsed_at":"2024-08-01T22:41:21.977Z","dependency_job_id":"24958824-6999-418c-9b25-3a154dd302e9","html_url":"https://github.com/cheersmas/react-placards","commit_stats":null,"previous_names":["cheersmas/react-notification"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheersmas%2Freact-placards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheersmas%2Freact-placards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheersmas%2Freact-placards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cheersmas%2Freact-placards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cheersmas","download_url":"https://codeload.github.com/cheersmas/react-placards/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223772260,"owners_count":17199975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["announcements","banners","cards","notifications","react","reactjs","reactjs-components"],"created_at":"2024-08-01T22:03:05.980Z","updated_at":"2024-11-09T00:31:36.815Z","avatar_url":"https://github.com/cheersmas.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Placards\n\n\u003cdiv align=\"center\"\u003e\n  \u003cdiv\u003e\n    \u003cimg src=\"./readme-assets/card.gif\" /\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eDescription\u003c/h2\u003e\n\n- A placards component inspired from [Stripe](https://stripe.com)\n- ANNOUNCE your own Custom Components\n- Built with [Typescript](https://www.typescriptlang.org/)\n- Styled with [Styled Components](https://www.styled-components.com/)\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\n- [Installation](#-installation)\n- [Getting Started](#getting-started)\n- [Props](#props)\n  - [Item Type](#item-type)\n  - [Stacked Card Style Props](#stacked-card-style-props)\n  - [Top Card Style Props](#top-card-style-props)\n  - [Container Style Props](#container-style-props)\n  - [Passing custom height/width](#passing-custom-height/width)\n  - [Passing custom timing](#passing-custom-timing)\n  - [Passing custom styling for Card](#passing-custom-styling-for-card)\n  - [Change second and third card's background](#change-second-and-third-card's-background)\n- [Meta](#meta)\n\n## Installation\n\n```sh\n  yarn add react-placards\n```\n\n## Getting Started\n\nA default `height` and `width` is given to the component but is required to render the component: [Refer](#container-style-props)\n\n```javascript\n\n  import React from 'react';\n  import { Placards } from 'react-placards'\n  import {CustomComponents} from '../somepath/CustomComponentLibrary.js'\n  function App() {\n    const items = [\n      {\n        id: \"content-types\",\n        content: \"You can pass in a plain text string.\",\n      },\n      {\n        id: \"custom-components\",\n        content: \u003cCustomComponents\n          heading=\"Custom Components\"\n          date=\"31-01-2021\"\n          description={\"OR you can create your own custom components\"}\n          {...extraProps}\n        /\u003e\n      }, ...];\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cPlacards\n          items={items}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n  export default App;\n\n```\n\n## Props\n\n| name            | description                                                                   | required | default                                                       |\n| --------------- | ----------------------------------------------------------------------------- | -------- | ------------------------------------------------------------- |\n| items           | collection of [Item Type](#item-type)                                         | true     | []                                                            |\n| width           | width of the component                                                        | false    | 200                                                           |\n| height          | height of the component                                                       | false    | 200                                                           |\n| timing          | delay between card switch                                                     | false    | 5000                                                          |\n| cardStyles      | style definitions for [Top Card Style Props](#top-card-styles-props)          | false    | check [Top Card Style Props](#top-card-styles-props)          |\n| stackCardStyles | style definitions for [Stacked Cards Style Props](#stacked-card-styles-props) | false    | check [Stacked Cards Style Props](#stacked-card-styles-props) |\n| containerStyles | style definitions for [Container Style Props](#container-style-props)         | false    | check [Container Style Props](#container-style-props)         |\n\n### Item Type\n\n| name    | description                                  | required | type                           |\n| ------- | -------------------------------------------- | -------- | ------------------------------ |\n| id      | unique key for each component being rendered | true     | `string`                       |\n| content | content that renders inside the cards        | true     | `string` or custom `Component` |\n\n\u003ch3\u003e\n  You can pass in a component or a string to content\n\u003c/h3\u003e\n\n```javascript\nitems = [\n  {\n    id: 'unique-id',\n    content: \u003cMyCustomComponent {...props} /\u003e\n  },\n  {\n    id: 'unique-id-2',\n    content: 'Text content'\n  }\n];\n```\n\n### Top Card Style Props\n\nUse the props below to change the styles of top card.\n\n\u003e Note: Top card's styles will be applied to all the item's content\n\n\u003e For more control on styles, reset the default styles and create your own Custom Card component\n\n| name            | description                                    | required | default                                                            |\n| --------------- | ---------------------------------------------- | -------- | ------------------------------------------------------------------ |\n| backgroundColor | background-color applied to top card           | false    | `#ffffff`                                                          |\n| borderRadius    | border-radius applied to ALL sides of top card | false    | 0px                                                                |\n| 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)` |\n| padding         | padding applied to top card                    | false    | 0px                                                                |\n\n```javascript\ncardStyles = {\n  backgroundColor: 'red',\n  borderRadius: '4px',\n  boxShadow: '0 10px 30px black',\n  padding: '10px'\n};\n```\n\n### Stacked Card Style Props\n\n| name        | description                             | required | default   |\n| ----------- | --------------------------------------- | -------- | --------- |\n| secondColor | background-color applied to second card | false    | `#f0f0f0` |\n| thirdColor  | background-color applied to third card  | false    | `#fafafa` |\n\n```javascript\nstackCardStyles = {\n  secondColor: 'red',\n  thirdColor: 'yellow'\n};\n```\n\n### Container Style Props\n\n\u003e use these to place your cards inside the container\n\n| name     | description               | required | default |\n| -------- | ------------------------- | -------- | ------- |\n| height   | height of the container   | false    | 200px   |\n| width    | width of the container    | false    | 200px   |\n| overflow | overflow of the container | false    | hidden  |\n| padding  | padding of the container  | false    | 5%      |\n\n```javascript\nstackCardStyles = {\n  height: 200,\n  width: 200,\n  overflow: 'hidden',\n  padding: '5%'\n};\n```\n\n### Passing custom height/width\n\nBy default `height` \u0026 `width` have been set to `200px`. Overide them by passing custom values.\n\n```javascript\n\u003cPlacards items={items} width=\"400\" height=\"400\" /\u003e\n```\n\n### Passing custom timing\n\nBy default `timing` has been set to `5000ms`. Overide it by passing custom `timing`.\n\n```javascript\n\u003cPlacards items={items} timing=\"7000\" /\u003e\n```\n\n### Passing custom styling for Card\n\nOverride `cardStyles` by passing custom styles\n\n```javascript\n\u003cPlacards\n  items={items}\n  cardStyles={{\n    padding: '10px',\n    borderRadius: '4px',\n    ...moreProperties\n  }}\n/\u003e\n```\n\n### Change second and third card's background\n\nOverride background colors of second and third cards\n\n```javascript\n\u003cPlacards\n  items={items}\n  stackCardStyles={{\n    secondColor: 'red',\n    thirdColor: 'yellow'\n  }}\n/\u003e\n```\n\n## Meta\n\nInspired from [Stripe](https://stripe.com/)'s Announcement Banners. (Sadly has been removed now :'( )\n\nDistributed under the MIT license. See `LICENSE` for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheersmas%2Freact-placards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcheersmas%2Freact-placards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcheersmas%2Freact-placards/lists"}