https://github.com/wpdas/react-tweet

A simple Tweet component for ReactJS apps.
https://github.com/wpdas/react-tweet

app component react tweet

Last synced: about 1 month ago
JSON representation

A simple Tweet component for ReactJS apps.

• Host: GitHub
• URL: https://github.com/wpdas/react-tweet
• Owner: wpdas
• License: mit
• Created: 2023-06-03T00:36:16.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-03T19:28:23.000Z (about 3 years ago)
• Last Synced: 2025-01-13T01:11:46.566Z (over 1 year ago)
• Topics: app, component, react, tweet
• Language: TypeScript
• Homepage:
• Size: 390 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Tweet - React Component

[![Build Status](https://img.shields.io/github/actions/workflow/status/wpdas/react-tweet/publish.yml?style=for-the-badge&colorB=000000)](https://github.com/wpdas/react-tweet/actions?query=workflow%3Apublish)

[![Build Size](https://img.shields.io/bundlephobia/minzip/@wpdas/react-tweet?color=000000&label=bundle&style=for-the-badge)](https://bundlephobia.com/package/@wpdas/react-tweet)

[![Version](https://img.shields.io/npm/v/@wpdas/react-tweet?style=for-the-badge&colorB=000000)](https://www.npmjs.com/package/@wpdas/react-tweet)

A simple Tweet component for ReactJS apps.

## Install

Install it using npm or yarn:

```sh

# npm

npm install @wpdas/react-tweet

# yarn

yarn add @wpdas/react-tweet

```

## How to use

```tsx

import { Tweet } from '@wpdas/react-tweet'

const App = () => {

  return (

    <>

       console.log('rendered')}

        onError={(err: string) => console.log(err)}

        options={{ theme: 'dark' }}

      />

    >

  )

}

export default App

```

**tweetURL:** (must) this is the tweet URL

**onRender:** (optional) method called when the tweet renders

**onError:** (optional) method called when there's an issue with the provided URL

**options:** (optional) you can set some options like:

```ts

type Options = {

  conversation?: 'none' | 'all'

  cards?: 'hidden' | 'visible'

  linkColor?: string

  theme?: 'light' | 'dark'

}

```

### How it looks after rendering:



## Good to know

The component will be re-rendered when the `tweetURL` or `options` property is changed.