# react-devto-embed

> Embed your dev.to articles in any project

Latest version **1.0.8-2** (published 2021-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-devto-embed
pnpm add react-devto-embed
yarn add react-devto-embed
bun add react-devto-embed
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8-2 |
| Published | 2021-01-04 |
| First published | 2021-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 273.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | temmietope |
| Maintainers | temmietope |

## Links

- npm: https://www.npmjs.com/package/react-devto-embed
- Repository: https://github.com/temmietope/react-devto-embed
- Homepage: https://github.com/temmietope/react-devto-embed#readme
- Issues: https://github.com/temmietope/react-devto-embed/issues
- npm.io page: https://npm.io/package/react-devto-embed

## Dependencies (1)

- [styled-components](https://npm.io/package/styled-components.md) ^5.2.1

## Recent versions

- 1.0.8-2 (latest) — 2021-01-04
- 1.0.8-1 — 2021-01-04
- 1.0.8 — 2021-01-04
- 1.0.7 — 2021-01-04
- 1.0.6 — 2021-01-04
- 1.0.5 — 2021-01-04
- 1.0.4 — 2021-01-03
- 1.0.3 — 2021-01-03
- 1.0.2 — 2021-01-03
- 1.0.1 — 2021-01-03
- 1.0.0 — 2021-01-03

## README

# react-devto-embed

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

[![NPM](https://img.shields.io/npm/v/react-devto-embed.svg)](https://www.npmjs.com/package/react-devto-embed) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-devto-embed
```

## Usage

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

```jsx
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](https://github.com/temmietope)

---
_Source: https://npm.io/package/react-devto-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._