@bentoproject/reddit
v1.2302271541.0
Published
Embeds a Reddit post or a comment on a Reddit post.
Downloads
336
Readme
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&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&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"
.