Skip to content

david-fernando/medium-posts-card

Repository files navigation

Medium Posts Card

Medium Posts Card

React Isomorphic library that show your Medium articles.

CSR SSR Licence


📝 Table of Contents

About

Are you looking for a React library to display your medium posts that render both the client side and on the server side? So you are in the right place! Medium Posts Card get your medium articles, and displays them on your website through an easy to use component. Just download and use, as simple as that.

Install

Install this library with one of the commands below

yarn add mediumpostscard

//or

npm install mediumpostscard

Components

Carousel

  • Describe

    Shows a Carousel with your Medium articles
  • Screenshot

    Medium Posts Card Carousel Preview
  • Basic usage (with example)

import { Carousel } from 'mediumpostscard'

function Example(){
  return (
    <Carousel username="alex.streza" />
  )
}

export default Example
  • Valid Props

Prop name Description Type Default
usernane Sets your Medium username String underfined
dataMedium Set data Medium (only to Server Side Rendering) Object underfined
options Object with options Object Object
  • Valid Options

Option Description Type Default
borderRadius Set if the card will have rounded edges Boolean true
openInNewTab Set if the link of article will openned in new tab Boolean true
showTags Define if the card will show article tags Boolean false
showDate Set if the card will show the date of the article Boolean false
ssr Set if the component should rendered on server Boolean false

List

  • Describe

    Shows a list with your Medium articles
  • Screenshot

    Medium Posts Card List Preview
  • Basic usage (with example)

import { List } from 'mediumpostscard'

function Example(){
  return (
    <List username="alex.streza" />
  )
}

export default Example
  • Valid Props

Prop name Description Type Default
usernane Sets your Medium username String underfined
dataMedium Set data Medium (only to Server Side Rendering) Object underfined
options Object with options Object Object
  • Valid Options

Option Description Type Default
openInNewTab Set if the link of article will openned in new tab Boolean true
showTags Define if the card will show article tags Boolean true
showDate Set if the card will show the date of the article Boolean true
borderRadius Set if the card will have rounded edges Boolean false
ssr Set if the component should rendered on server Boolean false

Label

  • Describe

    Wrapper component that add label on other components
  • Screenshot

    Medium Posts Card Carousel with label
  • Example with carousel

import { Carousel, Label } from 'mediumpostscard'

function Example(){
  return (
    <Label>
      <Carousel username="alex.streza" />
    </Label>
  )
}

export default Example
  • Example with List

import { List, Label } from 'mediumpostscard'

function Example(){
  return (
    <Label>
      <List username="alex.streza" />
    </Label>
  )
}

export default Example
  • Valid Props

Prop name Description Type Default
text Set text on label String 'Medium Articles'
children Set component to be labeled JSX.Element No default

Server Side Rendering

  • Usage

To make the component render the server do the prefetching:

const dataMedium = fetchMedium('yourmediumusername')

Next define ssr as true, according to the example

<Carousel dataMedium={dataMedium} options={{ssr: true}} />

In the example above, I used the Carousel component, but you do the same with the List component.

Next I will show an example of how to make server side on Next.js

import Head from 'next/head'
import { List, fetchMedium } from 'mediumpostscard'

export default function Home({dataMedium}) {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <List dataMedium={dataMedium} options={{ssr: true}} />

    </div>
  )
}

export async function getStaticProps() {
  const dataMedium = await fetchMedium('alex.streza')
  return {
    props: {
      dataMedium
    }
  }
}

How to contribute

Fork this repository, make clone for your machine.

Install the dependencies with the command below:

yarn install

To view on storybook

yarn storybook

To build

yarn build

To run the tests.

yarn test

More

Didn't you like any of the components? No problem! You can use Medium Posts API to build your own react component. Moreover you too can contribute with code. Feel free to add new features to our library. We are open-source.

✍️ Author