Introduction Props Styling Themes Colors Gradient background Blurred background Accessing the DOM node Classnames

Styling

Themes

The theme prop can be set to light, dim, or dark. Try it out!

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    theme="dim" // try "light" and "dark"
  />
</Container>

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    theme="dim" // try "light" and "dark"
  />
</Container>

Colors

The colors of the pre-defined themes can be extended.

Color setting	Used
primary	Author name, tweet text
secondary	Author username, time
accent	Source, mentions, links
background	Background color of the container

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    colors={{
      primary: '#ffffff',
      secondary: '#add8e6',
      accent: '#ffffd8',
      background: '#e5e4ff',
    }}
  />
</Container>

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    colors={{
      primary: '#ffffff',
      secondary: '#add8e6',
      accent: '#ffffd8',
      background: '#e5e4ff',
    }}
  />
</Container>

Gradient background

Passing in the gradientBackground prop to the component will create a gradient background to the container based on the background color of the active theme.

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    theme="light" // try "dim" and "dark"
    gradientBackground
  />
</Container>

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    theme="light" // try "dim" and "dark"
    gradientBackground
  />
</Container>

Blurred background

Passing in the blurredBackground prop to the component will create a blurred effect on the background of the container.

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    theme="light" // try "dim" and "dark"
    blurredBackground
  />
</Container>

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    theme="light" // try "dim" and "dark"
    blurredBackground
  />
</Container>

Any prop that's a valid HTML5 attribute can be passed in to the component, and its main div will get those attributes, including className and style. This way the component can easily be used with libraries like styled components.

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    style={{
      transform: 'rotate(5deg)',
    }}
  />
</Container>

<Container>
  <TweetCard
    {...{ author, tweet, time, source, permalink, fitInsideContainer }}
    style={{
      transform: 'rotate(5deg)',
    }}
  />
</Container>

Classnames

The component intentionally exposes classnames on its elements for you to control from your own stylesheet. All classnames start with the react-tweet-card prefix.

Exposed classnames

react-tweet-card__container
react-tweet-card__author-name
react-tweet-card__author-username
react-tweet-card__author-image
react-tweet-card__verified-badge
react-tweet-card__protected-icon
react-tweet-card__time
react-tweet-card__source
react-tweet-card__tweet
react-tweet-card__imageContainer
react-tweet-card__image
react-tweet-card__twitter-logo
react-tweet-card__engagement-container
react-tweet-card__replies
react-tweet-card__retweets
react-tweet-card__likes

/* example */
    
.react-tweet-card__username {
    display: none;
}