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