\n\n## Table of Contents:\n\n1. [Features](#features)\n2. [How to use](#how-to-use)\n3. [State and input handler example](#state-and-input-handler-example)\n4. [Translations (i18n)](#translations-i18n)\n5. [How to contribute](#how-to-contribute)\n6. [Credits](#credits)\n\n## Features:\n\n- 😀 Easy to use\n- 📄 Supports all the features that the real Discord card supports (color gradient, badges, Spotify, and more)\n- ⚙️ Highly modular and customizable\n- 🏷️ Integrates with [Lanyard](https://github.com/Phineas/lanyard) to sync your _real_ Discord status with this component\n- ♿ Accessible\n- 🌐 I18n friendly (can translate it to any language)\n\n## How to use\n\n**Requires NodeJS 18 or newer.**\n\nInstall the package with your package manager of choice. Example:\n\n`npm install discord-card-react`\n\nImport the card you want to use and the styles:\n\n```\n// Static card, doesn't sync with your real Discord status\nimport { DiscordCard } from \"discord-card-react\";\n\n// or\n\n// Dynamic card, uses Lanyard to sync with your Discord status\nimport { LanyardDiscordCard } from \"discord-card-react\";\n\n// DON'T FORGET TO ADD THE STYLES OR THE CARD WILL LOOK UGLY!\nimport \"discord-card-react/styles\";\n```\n\n> [!IMPORTANT]\n> Remember to import the styles using import \"discord-card-react/styles\";\n\n**Note**: The component now includes scoped Tailwind preflight styles to ensure consistent styling across different environments. These are automatically applied and won't affect your global styles.\n\n### Styling and CSS Reset\n\nThe Discord card component includes built-in CSS reset/preflight styles that are automatically scoped to the component. This ensures consistent styling without affecting your application's global styles.\n\nAfter importing, copy one of the templates below to add the card(s).\n\n### Static Card (\\)\n\nPass props to it to customize. Like the name says, it's static and doesn't update dynamically based on your real Discord status. **If you want to add a dynamic card that updates with your status, check the next template below.**\n\n```js\n\n```\n\n#### Spotify preview\n\n\n\n#### Game preview\n\n\n\n### Lanyard Card (\\)\n\nPass your Discord ID as a prop to automatically update the card's status and Spotify/Game sections using [Lanyard](https://github.com/Phineas/lanyard) in WebSocket mode.\n\nMake sure to set up Lanyard by following [the instructions](https://github.com/Phineas/lanyard) (extremely easy).\n\n```js\n\n```\n\n## State and input handler example\n\nThis is an example on how to implement basic state and input handling for the message and note fields, so you can retrieve its value.\n\n```js\nconst [note, setNote] = useState(\"\");\nconst [message, setMessage] = useState(\"\");\n\nfunction handleNoteChange(event) {\n setNote(event.target.value);\n}\n\nfunction handleMessageChange(event) {\n setMessage(event.target.value);\n}\n\n;\n```\n\n## Translations (i18n)\n\nYou can translate all the sections that have titles by passing a `title` prop. (**About Me, Member Since, Playing a Game, Listening to Spotify, Roles, Note**). This will override the default title.\n\nThe Spotify and Game sections provide additional options (check the examples in [How to use!](#how-to-use))\n\nFor example, translating the Member Since section to Spanish:\n\n```js\nmemberSince={{\n discordJoinDate: \"20 Jul 2016\",\n title: \"Miembro desde\",\n serverJoinDate: \"1 Sep 2020\",\n serverIconUrl: \"https://asdasd.com/icon.png\",\n serverName: \"Servidor X\"\n}}\n```\n\n\n\n## How to contribute\n\nAll contributions are greatly appreciated! Please keep PRs short, focusing only in one feature/fix you want to implement, so they can be easily reviewed.\n\nFollow these instructions if you are a newcomer:\n\n1. Fork the repository and clone it\n2. Make a new branch using the command `git switch -c BranchName`\n3. Install dependencies using your package manager of choice (for example: `npm install`)\n4. Start the development server to see your changes live using `npm run dev`\n5. Once you have finished your work, commit your changes and [open a PR!](https://github.com/MiguelHigueraDev/discord-card-react/pulls)\n\n## Credits\n\nUses [react-use-lanyard](https://www.npmjs.com/package/react-use-lanyard).\n","readmeFilename":"README.md"}
![](\"github/card-preview-v2.png\")
\n