react-devto-embed

react dev-dot-to embed easily for any project. Very customizable!

Install

npm install --save react-devto-embed

Usage

import React from 'react'
import ReactDevTo from 'react-devto-embed'

const App = () => {
  const username = 'temmietope'
  return <ReactDevTo username={username} />
}

Props

| Props | Description | Type | Default value | options | | ----------------------- | ---------------------------- | ------ | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | username | dev.to username | String | - | username on dev.to | | itemsPerRow | Number of posts on a row | Number | 2 | 1,2,3,4 | | postHeight | Height of individual post | String | '15rem' | Desired height in px, rem, vh etc | | margin | Margin around post | String | '1%' | Desired margin in px, rem, etc | | headerSize | Font size of post header(h3) | String | '2rem' | Desired font-size in px, rem, etc. Note that at screen size of below 768px, this is neglected | | headerColor | Color of post header(h3) | String | '#333' | Desired color in rgba, hex, etc. | | headerTextTransform | Text transform of Header | String | 'capitalize' | 'capitalize', 'uppercase', 'lowercase' | | exceptSize | Font size of post excerpt(p) | String | '1.05rem' | Desired font-size in px, rem, etc. Note that at screen size of below 768px, this is neglected | | excerptColor | Color of post excerpt(p) | String | '#333' | Desired color in rgba, hex, etc. | | buttonBgColor | Color of post button(button) | String | 'linear-gradient(225deg, rgb(38, 60, 139) 0%, rgb(6, 14, 76) 100%)' | Desired color in rgba, hex, etc. | | buttonFontColor | Color of post button(button) | String | '#f2f2f2' | Desired color in rgba, hex, etc. | | buttonText | Text on post button | String | 'Read Post' | Desired text on button | | loadingMessage | Loading message | String | 'Loading' | Desired loading message | | errorMessage | Error message | String | 'Nothing to display' | Desired error message |

Example Usage with various props

import React from 'react'
import ReactDevTo from 'react-devto-embed'

const App = () => {
  const username = 'temmietope'
  return (
    <ReactDevTo
      username={username}
      itemsPerRow={2}
      postHeight='15rem'
      margin='1%'
      headerSize='2rem'
      headerColor='#333'
      headerTextTransform='capitalize'
      excerptSize='1.05rem'
      excerptColor='#333'
      buttonBgColor='linear-gradient(225deg, rgb(38, 60, 139) 0%, rgb(6, 14, 76) 100%)'
      buttonFontColor='#f2f2f2'
      buttonText='Read Post'
      loadingMessage='Loading'
      errorMessage='Nothing to display :)'
    />
  )
}

License

MIT © temmietope