Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@bentoproject/reddit

Package Overview
Dependencies
1
Maintainers
3
Versions
29
Issues
File Explorer

Advanced tools

@bentoproject/reddit

Embeds a Reddit post or a comment on a Reddit post.

    1.2205051832.0latest

Version published
Maintainers
3
Yearly downloads
1,460

Weekly downloads

Readme

Source

Bento Reddit

Embeds a Reddit post or a comment on a Reddit post.

Web Component

You must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See Layout and Style.

Import via npm

npm install @bentoproject/reddit import {defineElement as defineBentoReddit} from '@bentoproject/reddit'; defineBentoReddit();

Include via <script>

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script> <script type="module" src="https://cdn.ampproject.org/v0/bento-reddit-1.0.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/v0/bento-reddit-1.0.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-reddit-1.0.css" crossorigin="anonymous">

Example

Embed a Reddit Post
<!DOCTYPE html> <html> <head> <script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script> <script type="module" src="https://cdn.ampproject.org/v0/bento-reddit-1.0.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/v0/bento-reddit-1.0.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-reddit-1.0.css" crossorigin="anonymous"> <style> bento-reddit { width: 300px; height: 400px; } </style> </head> <body> <bento-reddit style="width: 300; height: 400;" data-embed-type="post" data-src="https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/?ref=share&amp;ref_source=embed" > </bento-reddit> </body> </html>
Embed a Reddit Comment
<!DOCTYPE html> <html> <head> <script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script> <script type="module" src="https://cdn.ampproject.org/v0/bento-reddit-1.0.mjs" crossorigin="anonymous"></script> <script nomodule src="https://cdn.ampproject.org/v0/bento-reddit-1.0.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-reddit-1.0.css" crossorigin="anonymous"> <style> bento-reddit { width: 300px; height: 400px; } </style> </head> <body> <bento-reddit style="width: 300; height: 400;" data-embed-type="comment" data-src="https://www.reddit.com/r/sports/comments/54loj1/50_cents_awful_1st_pitch_given_a_historical/d8306kw" data-uuid="b1246282-bd7b-4778-8c5b-5b08ac0e175e" data-embed-created="2016-09-26T21:26:17.823Z" data-embed-parent="true" data-embed-live="true" > </bento-reddit> </body> </html>

Layout and Style

Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.

<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-reddit-1.0.css" />

Alternatively, you may also make the light-weight pre-upgrade styles available inline:

<style> bento-reddit{ display: block; overflow: hidden; position: relative; } </style>

Attributes

data-embedtype

The type of the embed, either post or comment.

data-src

The permalink uri for the post or comment.

data-uuid(optional)

The provided UUID for the comment embed. Supported when data-embedtype is comment.

data-embedcreated (optional)

The datetime string for the comment embed. Supported when data-embedtype is comment.

data-embedparent (optional)

Indicates whether the parent comment for the embedded comment should be displayed. Supported when data-embedtype is comment.

data-embedlive (optional)

Indicates whether the embedded comment should update if the original comment is updated. Supported when data-embedtype is comment.

title (optional)

Define a title attribute for the component. The default is Reddit.

Preact/React Component

Import via npm

npm install @bentoproject/reddit import React from 'react'; import {BentoReddit} from '@bentoproject/reddit/react'; import '@bentoproject/reddit/styles.css'; function App() { return ( <BentoReddit style={{width: 300, height: 200, border: '8px solid red'}} embedType="post" src="https://www.reddit.com/r/me_irl/comments/52rmir/me_irl/?ref=share&amp;ref_source=embed" ></BentoReddit> ); }

Props

embedType

The type of the embed, either post or comment.

src

The permalink uri for the post or comment.

uuid(optional)

The provided UUID for the comment embed. Supported when data-embedtype is comment.

embedCreated (optional)

The datetime string for the comment embed. Supported when data-embedtype is comment.

embedParent (optional)

Indicates whether the parent comment for the embedded comment should be displayed. Supported when data-embedtype is comment.

embedLive (optional)

Indicates whether the embedded comment should update if the original comment is updated. Supported when data-embedtype is comment.

title (optional)

Define a title attribute for the component. The default is "Reddit".

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc