1.2302271541.0 • Published 1 year ago

@bentoproject/twitter v1.2302271541.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 year ago

Bento Twitter

Embeds Twitter content like a Tweet or a Moment.

Web Component

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.

Import via npm

npm install @bentoproject/twitter
import {defineElement as defineBentoTwitters} from '@bentoproject/twitter';
defineBentoTwitters();

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-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">

Example

<!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>

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-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>

Container type

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%;
}

Attributes

Interactivity and API usage

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>

Preact/React Component

Import via npm

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>;
}

Layout and style

Container type

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%;
}

Props

@bentoproject/core
@infinitebrahmanuniverse/nolb-_ben@everything-registry/sub-chunk-121@zalastax/nolb-_ben
1.2302171719.0

1 year ago

1.2302271541.0

1 year ago

1.2302031721.0

1 year ago

1.2301301810.0

1 year ago

1.2301041800.0

1 year ago

1.2301112346.0

1 year ago

1.2302021743.0

1 year ago

1.2301031703.0

1 year ago

1.2301181928.0

1 year ago

1.2301032153.0

1 year ago

1.2301261900.0

1 year ago

1.2301100345.0

1 year ago

1.2302012254.0

1 year ago

1.2212151632.2

1 year ago

1.2211042305.0

2 years ago

1.2211111611.0

1 year ago

1.2211060024.0

2 years ago

1.2210191347.0

2 years ago

1.2211302304.0

1 year ago

1.2211302304.2

1 year ago

1.2211302304.1

1 year ago

1.2211151402.0

1 year ago

1.2210251605.0

2 years ago

1.2210272257.0

2 years ago

1.2211182146.0

1 year ago

1.2211250451.0

1 year ago

1.2210172057.0

2 years ago

1.2212092023.0

1 year ago

1.2212151632.1

1 year ago

1.2210211855.0

2 years ago

1.2212151632.0

1 year ago

1.2212071834.0

1 year ago

1.2210142102.0

2 years ago

1.2210041838.0

2 years ago

1.2210112333.0

2 years ago

1.2210052034.0

2 years ago

1.2210010655.0

2 years ago

1.2210071758.0

2 years ago

1.2208242209.0

2 years ago

1.2208242209.1

2 years ago

1.2209142312.0

2 years ago

1.2209072154.0

2 years ago

1.2209131909.0

2 years ago

1.2208172101.0

2 years ago

1.2207201724.0

2 years ago

1.2205270638.4

2 years ago

1.2206071918.0

2 years ago

1.2206071918.1

2 years ago

1.2205120110.1

2 years ago

1.2205270638.0

2 years ago

1.2206131450.0

2 years ago

1.2207071723.0

2 years ago

1.2208121708.0

2 years ago

1.2208021808.0

2 years ago

1.2206291614.0

2 years ago

1.2207181727.0

2 years ago

1.2208042017.0

2 years ago

1.2205232225.0

2 years ago

1.2207261725.0

2 years ago

1.2208112015.0

2 years ago

1.2206082301.0

2 years ago

1.2208081650.0

2 years ago

1.2208092047.0

2 years ago

1.2206221455.0

2 years ago

1.2207221643.0

2 years ago

1.2208051912.0

2 years ago

1.2208051912.1

2 years ago

1.2206072228.0

2 years ago

1.2207281718.2

2 years ago

1.2207281718.1

2 years ago

1.2207281718.0

2 years ago

1.2206101637.0

2 years ago

1.2205251942.0

2 years ago

1.2206162023.0

2 years ago

1.2204281949.0

2 years ago

1.2205120110.0

2 years ago

1.2205051832.0

2 years ago

1.2205101904.0

2 years ago

1.2205041533.0

2 years ago

1.2205181800.0

2 years ago

1.2204252045.0

2 years ago

1.2204292129.0

2 years ago

1.2204272205.0

2 years ago

1.2205090810.0

2 years ago

1.2205161914.0

2 years ago

1.2205191749.0

2 years ago

1.2205031420.0

2 years ago

1.2203101844.0

2 years ago

1.2204182206.0

2 years ago

1.2203151539.0

2 years ago

1.2203281422.0

2 years ago

1.2204122000.0

2 years ago

1.2203221937.0

2 years ago

1.2204221712.0

2 years ago

1.2203231914.0

2 years ago

1.2204160405.0

2 years ago

1.2203172113.0

2 years ago

1.2204132005.0

2 years ago

1.2204142048.0

2 years ago

1.2204211736.0

2 years ago

1.2203041950.0

2 years ago

1.2204121632.0

2 years ago

1.2204191429.0

2 years ago

1.2202230359.1

2 years ago

1.2202241911.0

2 years ago

1.2202252101.0

2 years ago

1.2201101902.0

2 years ago

1.2201042109.0

2 years ago

1.2112231523.2

2 years ago

1.2112231523.1

2 years ago

1.2112231523.0

2 years ago

1.2202162256.0

2 years ago

1.2202012258.0

2 years ago

1.2202230359.0

2 years ago

1.2111242025.1

2 years ago

1.2112062322.2

2 years ago

1.2112091956.0

2 years ago

1.2112062322.0

2 years ago

1.2202042210.0

2 years ago

1.2202042210.1

2 years ago

1.2112201724.0

2 years ago

1.2112162055.0

2 years ago

1.2112221739.0

2 years ago

1.2201061922.0

2 years ago

1.2112132331.0

2 years ago

1.2201122239.0

2 years ago

1.2202142035.0

2 years ago

1.2202152253.0

2 years ago

1.2202112230.0

2 years ago

1.2202082004.0

2 years ago

1.2201120015.0

2 years ago

1.2112082232.0

2 years ago

1.2201212122.3

2 years ago

1.2202022130.0

2 years ago

1.2202031816.0

2 years ago

1.2112212349.0

2 years ago

1.2201052144.0

2 years ago

1.2202180255.0

2 years ago

1.2112080230.1

2 years ago

1.2201262038.1

2 years ago

1.2112080230.0

2 years ago

1.2201141909.0

2 years ago

1.2201141909.1

2 years ago

1.2201141909.3

2 years ago

1.2201141909.4

2 years ago

1.2112160003.0

2 years ago

1.2201071715.0

2 years ago

1.2202072236.0

2 years ago

1.2112170012.0

2 years ago

1.2202092050.0

2 years ago

1.2201131702.0

2 years ago

1.2112102136.0

2 years ago

1.2202232232.0

2 years ago

1.2111191951.0

2 years ago

1.2111292120.0

2 years ago

1.2111180040.0

2 years ago

1.2111230636.0

2 years ago

1.2111230244.0

2 years ago

1.2111152338.2

2 years ago

1.2112010058.0

2 years ago

1.2111060251.3

2 years ago

1.2111242025.0

2 years ago

1.2111182332.0

2 years ago

1.2112032204.0

2 years ago

1.2112021656.0

2 years ago

1.2112012300.0

2 years ago

1.2111060251.9

2 years ago

1.2111022043.0

3 years ago

1.2110212130.2

3 years ago

1.2110152252.3

3 years ago

1.2111011823.0

3 years ago

1.2110290545.0

3 years ago

1.2110281959.0

3 years ago

1.2110252343.0

3 years ago

1.2110261518.0

3 years ago