https://github.com/gauthier-th/embed-visualizer

A React Component to render Discord-like embeds.
https://github.com/gauthier-th/embed-visualizer

discord discord-js embed react

Last synced: 4 months ago
JSON representation

A React Component to render Discord-like embeds.

• Host: GitHub
• URL: https://github.com/gauthier-th/embed-visualizer
• Owner: gauthier-th
• License: mit
• Created: 2020-08-26T14:27:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-06-15T18:17:39.000Z (over 1 year ago)
• Last Synced: 2024-09-29T09:21:31.370Z (4 months ago)
• Topics: discord, discord-js, embed, react
• Language: CSS
• Homepage: https://gauthier-th.github.io/embed-visualizer/
• Size: 8.89 MB
• Stars: 15
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# embed-visualizer

A React Component to render Discord-like embeds.

[![NPM](https://img.shields.io/npm/v/embed-visualizer.svg)](https://www.npmjs.com/package/embed-visualizer) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![npm bundle size](https://img.shields.io/bundlephobia/min/embed-visualizer) ![npm](https://img.shields.io/npm/dt/embed-visualizer) ![GitHub](https://img.shields.io/github/license/gauthier-th/embed-visualizer)

## Install

```bash

npm install --save embed-visualizer

```

## Usage

```jsx

import React, { Component } from 'react'

import { EmbedVisualizer, parseContent, parseTitle } from 'embed-visualizer'

import 'embed-visualizer/dist/index.css'

const embed = {

  embed: {

    title: "Embed title",

    description: "👌 this supports [named links](https://discordapp.com), __**markdown**__ and `inline code`. ```\nyes, even code blocks```||you can also use spoilers||"

  }

}

export default class Example extends Component {

  render() {

    return 


      


        
Classic embed:

         console.error("Error while parsing embed:", e)} />

      

      


        
Custom content parsing:

        


          
{parseTitle(embed.embed.title)}

          
{parseContent(embed.embed.description)}

        

      

    

  }

}

```


## Preview

![Embed preview](https://user-images.githubusercontent.com/37781713/178846235-2bb46c81-1a24-4069-8128-a516192b7319.png)

## License

MIT © [gauthier-th](https://github.com/gauthier-th)

Created from [embed-visualizer](https://github.com/leovoel/embed-visualizer)