Repository: capaj/react-tweet-embed
Branch: master
Commit: 96abd1f90d03
Files: 12
Total size: 9.0 KB

Directory structure:
gitextract_t4afyq6m/

├── .editorconfig
├── .github/
│   └── workflows/
│       └── main.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── package.json
├── readme.md
├── src/
│   ├── tweet-embed.spec.tsx
│   ├── tweet-embed.spec.tsx.md
│   ├── tweet-embed.spec.tsx.snap
│   └── tweet-embed.tsx
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
[*.js]
indent_style = space
indent_size = 2

================================================
FILE: .github/workflows/main.yml
================================================
name: Node.js CI

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm ci
      - run: npm run build --if-present
      - run: npm test


================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
node_modules

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history
.vscode
dist
.rts2_cache_*

================================================
FILE: .prettierrc
================================================
{
  "arrowParens": "always",
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2016 Jiri Spac

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: package.json
================================================
{
  "name": "react-tweet-embed",
  "version": "2.0.0",
  "description": "react component that takes tweet id in props and renders tweet embed, nothing more",
  "main": "dist/tweet-embed.js",
  "types": "dist/tweet-embed.d.ts",
  "module": "dist/tweet-embed.es.js",
  "unpkg": "dist/tweet-embed.umd.js",
  "source": "src/tweet-embed.tsx",
  "scripts": {
    "test": "ava",
    "testu": "ava -u",
    "build": "microbundle --jsx React.createElement",
    "dev": "microbundle watch",
    "prepublish": "npm test && npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/capaj/react-tweet-embed.git"
  },
  "author": "capajj@gmail.com",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/capaj/react-tweet-embed/issues"
  },
  "homepage": "https://github.com/capaj/react-tweet-embed#readme",
  "peerDependencies": {
    "react": ">=17"
  },
  "devDependencies": {
    "@types/prop-types": "^15.7.4",
    "@types/react": "^17.0.39",
    "ava": "^3.15.0",
    "enzyme": "^3.11.0",
    "husky": "^7.0.4",
    "jsdom": "^17.0.0",
    "microbundle": "^0.14.2",
    "prettier": "^2.5.1",
    "pretty-quick": "^3.1.3",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "rimraf": "^3.0.2",
    "ts-node": "^10.5.0",
    "typescript": "^4.5.5"
  },
  "files": [
    "dist"
  ],
  "ava": {
    "files": [
      "**/*.spec.tsx"
    ],
    "extensions": [
      "ts",
      "tsx"
    ],
    "require": [
      "ts-node/register"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}


================================================
FILE: readme.md
================================================
# react-tweet-embed

## Install

```
npm i react-tweet-embed
```

## Quickstart [![Edit react-tweet-embed](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/74rn3r9k0?fontsize=14)

```tsx
import React from 'react'
import TweetEmbed from 'react-tweet-embed'

export const App = () => {
  return <TweetEmbed tweetId="692527862369357824" />
}
```

You don't have to put `//platform.twitter.com/widgets.js` script in your index.html as this lib will put it there if `twttr` is not found on `window`.

## Props

### `placeholder`

Text to be shown while the tweet is loading:
```html
<TweetEmbed id='1186523464712146944' placeholder='Sending this tweet through space via Starlink satellite 🛰'/>
```

### `options`

Key-value pairs from the [embedded tweet parameter reference](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference):

```html
<TweetEmbed id='783943172057694208' options={{cards: 'hidden' }}/>
<TweetEmbed id='771763270273294336' options={{theme: 'dark' }}/>

```


================================================
FILE: src/tweet-embed.spec.tsx
================================================
import test from 'ava'
import TweetEmbed from './tweet-embed'
import React from 'react'

test('renders', (t) => {
  t.snapshot(<TweetEmbed tweetId="692527862369357824" className="tweet" />)
})

test.cb('calls twttr api', (t) => {
  global['window'] = {
    // @ts-expect-error
    twttr: {
      widgets: {
        createTweetEmbed: (...args) => {
          t.snapshot(args)
          t.end()
          return Promise.resolve()
        }
      }
    }
  }
  // @ts-expect-error
  global['window'].twttr.ready = () => Promise.resolve(global['window'].twttr)

  const comp = new TweetEmbed({ tweetId: 'tweet_id', options: { myOption: 1 } })
  comp.componentDidMount()
})


================================================
FILE: src/tweet-embed.spec.tsx.md
================================================
# Snapshot report for `src/tweet-embed.spec.tsx`

The actual snapshot is saved in `tweet-embed.spec.tsx.snap`.

Generated by [AVA](https://avajs.dev).

## renders

> Snapshot 1

    <TweetEmbed⍟
      className="tweet"
      options={{}}
      protocol="https:"
      tweetId="692527862369357824"
    />

## calls twttr api

> Snapshot 1

    [
      'tweet_id',
      undefined,
      {
        myOption: 1,
      },
    ]


================================================
FILE: src/tweet-embed.tsx
================================================
import React from 'react'
import PropTypes from 'prop-types'

const callbacks = []

function addScript(src: string, cb: () => any) {
  if (callbacks.length === 0) {
    callbacks.push(cb)
    var s = document.createElement('script')
    s.setAttribute('src', src)
    s.addEventListener('load', () => callbacks.forEach((cb) => cb()), false)
    document.body.appendChild(s)
  } else {
    callbacks.push(cb)
  }
}

interface ITweetEmbedProps {
  tweetId: string
  options?: object
  placeholder?: string | React.ReactNode
  protocol?: string
  onTweetLoadSuccess?: (twitterWidgetElement: HTMLElement) => any
  onTweetLoadError?: (err: Error) => any
  className?: string
}

interface ITweetEmbedState {
  isLoading: boolean
}

class TweetEmbed extends React.Component<ITweetEmbedProps> {
  _div?: HTMLDivElement
  static propTypes = {
    tweetId: PropTypes.string,
    options: PropTypes.object,
    placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    protocol: PropTypes.string,
    onTweetLoadSuccess: PropTypes.func,
    onTweetLoadError: PropTypes.func,
    className: PropTypes.string
  }

  static defaultProps = {
    protocol: 'https:',
    options: {},
    className: null
  }

  state: ITweetEmbedState = {
    isLoading: true
  }
  loadTweetForProps(props: ITweetEmbedProps) {
    const renderTweet = () => {
      const twttr = window['twttr']
      twttr.ready().then(({ widgets }) => {
        // Clear previously rendered tweet before rendering the updated tweet id
        if (this._div) {
          this._div.innerHTML = ''
        }

        const { options, onTweetLoadSuccess, onTweetLoadError } = props
        widgets
          .createTweetEmbed(this.props.tweetId, this._div, options)
          .then((twitterWidgetElement) => {
            this.setState({
              isLoading: false
            })
            onTweetLoadSuccess && onTweetLoadSuccess(twitterWidgetElement)
          })
          .catch(onTweetLoadError)
      })
    }

    const twttr = window['twttr']
    if (!(twttr && twttr.ready)) {
      const isLocal = window.location.protocol.indexOf('file') >= 0
      const protocol = isLocal ? this.props.protocol : ''

      addScript(`${protocol}//platform.twitter.com/widgets.js`, renderTweet)
    } else {
      renderTweet()
    }
  }

  componentDidMount() {
    this.loadTweetForProps(this.props)
  }

  shouldComponentUpdate(
    nextProps: ITweetEmbedProps,
    nextState: ITweetEmbedState
  ) {
    return (
      this.props.tweetId !== nextProps.tweetId ||
      this.props.className !== nextProps.className
    )
  }

  componentWillUpdate(nextProps, nextState) {
    if (this.props.tweetId !== nextProps.tweetId) {
      this.loadTweetForProps(nextProps)
    }
  }

  render() {
    const { props, state } = this
    const {
      tweetId,
      onTweetLoadError,
      onTweetLoadSuccess,
      options,
      children,
      placeholder,
      protocol,
      ...restProps
    } = props
    return (
      <div
        {...restProps}
        ref={(c) => {
          this._div = c
        }}
      >
        {state.isLoading && props.placeholder}
      </div>
    )
  }
}

export default TweetEmbed


================================================
FILE: tsconfig.json
================================================
{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react"
  }
}