mediumpostscard

v2.0.5

Published

a year ago

React Isomorphic library that show your Medium articles.

Downloads

0High
0Medium
0Low

Medium Posts Card MediumPostsCard Medium Post Card Medium React Card React React JS React library ReactLibrary BibliotecaReact JavaScript JavaScript library Biblioteca JavaScript

📝 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

import { Carousel } from 'mediumpostscard'

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

export default Example

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

| 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

import { List } from 'mediumpostscard'

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

export default Example

| 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

import { Carousel, Label } from 'mediumpostscard'

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

export default Example

import { List, Label } from 'mediumpostscard'

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

export default Example

| 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

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

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

@david-fernando - Idea & Initial work

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme