src/bento/components/bento-twitter/1.0/README.md
Embeds Twitter content like a Tweet or a Moment.
You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.
npm install @bentoproject/twitter
import {defineElement as defineBentoTwitters} from '@bentoproject/twitter';
defineBentoTwitters();
<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-twitter-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<script
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
type="module"
async
src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"
></script>
<script
nomodule
async
src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
/>
<style>
bento-twitter {
width: 375px;
height: 472px;
}
</style>
</head>
<body>
<bento-twitter id="my-tweet" data-tweetid="885634330868850689"></bento-twitter>
</body>
</html>
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-twitter-1.0.css"
/>
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
<style>
bento-twitter {
display: block;
overflow: hidden;
position: relative;
}
</style>
The bento-twitter component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties):
bento-twitter {
height: 100px;
width: 100%;
}
Programmatically changing any of the attribute values will automatically update the element. For example, changing the tweet id via data-tweetid will automatically load the new tweet:
<!DOCTYPE html>
<html>
<head>
<script
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
type="module"
async
src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"
></script>
<script
nomodule
async
src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"
/>
<style>
bento-twitter {
width: 375px;
height: 472px;
}
</style>
</head>
<body>
<bento-twitter id="my-tweet" data-tweetid="885634330868850689">
</bento-twitter>
<div class="buttons" style="margin-top: 8px">
<button id="change-tweet">Change tweet</button>
</div>
<script>
(async () => {
const twitter = document.querySelector('#my-tweet');
// set up button actions
document.querySelector('#change-tweet').onclick = () => {
twitter.setAttribute('data-tweetid', '495719809695621121');
};
})();
</script>
</body>
</html>
npm install @bentoproject/twitter
import React from 'react';
import {BentoTwitter} from '@bentoproject/twitter/react';
import '@bentoproject/twitter/styles.css';
function App() {
return <BentoTwitter tweetid="1356304203044499462"></BentoTwitter>;
}
The BentoTwitter component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties). These can be applied inline:
<BentoTwitter
style={{width: 300, height: 100}}
tweetid="1356304203044499462"
></BentoTwitter>
Or via className:
<BentoTwitter
className="custom-styles"
tweetid="1356304203044499462"
></BentoTwitter>
.custom-styles {
height: 100px;
width: 100%;
}