# @upnread/post-renderer

> Upnread library to render your amazing posts!

Latest version **1.0.8** (published 2021-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @upnread/post-renderer
pnpm add @upnread/post-renderer
yarn add @upnread/post-renderer
bun add @upnread/post-renderer
```

## 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 |
| Published | 2021-06-23 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 17 |
| Unpacked size | 113.3 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Upnread |
| Maintainers | ricardomalagon |

## Links

- npm: https://www.npmjs.com/package/@upnread/post-renderer
- Repository: https://github.com/upnread/post-renderer
- Homepage: https://github.com/upnread/post-renderer#readme
- Issues: https://github.com/upnread/post-renderer/issues
- npm.io page: https://npm.io/package/@upnread/post-renderer

## Dependencies (17)

- [axios](https://npm.io/package/axios.md) ^0.21.1
- [prismjs](https://npm.io/package/prismjs.md) ^1.23.0
- [draft-js](https://npm.io/package/draft-js.md) ^0.11.7
- [immutable](https://npm.io/package/immutable.md) ^3.7.6-rc.11
- [draft-js-prism](https://npm.io/package/draft-js-prism.md) ^1.0.6
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.1
- [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^4.0.0
- [@draft-js-plugins/focus](https://npm.io/package/@draft-js-plugins/focus.md) ^4.1.0
- [@draft-js-plugins/image](https://npm.io/package/@draft-js-plugins/image.md) ^4.1.0
- [@draft-js-plugins/video](https://npm.io/package/@draft-js-plugins/video.md) ^4.1.0
- [draft-js-hashtag-plugin](https://npm.io/package/draft-js-hashtag-plugin.md) ^2.0.4
- [@draft-js-plugins/editor](https://npm.io/package/@draft-js-plugins/editor.md) ^4.1.0
- [@draft-js-plugins/divider](https://npm.io/package/@draft-js-plugins/divider.md) ^4.1.0
- [@draft-js-plugins/hashtag](https://npm.io/package/@draft-js-plugins/hashtag.md) ^4.2.0
- [@draft-js-plugins/linkify](https://npm.io/package/@draft-js-plugins/linkify.md) ^4.1.0
- [@draft-js-plugins/alignment](https://npm.io/package/@draft-js-plugins/alignment.md) ^4.1.0
- [@draft-js-plugins/resizeable](https://npm.io/package/@draft-js-plugins/resizeable.md) ^4.1.0

## Recent versions

- 1.0.8 (latest) — 2021-06-23
- 1.0.7 — 2021-05-13
- 1.0.6 — 2021-05-13
- 1.0.5 — 2021-04-25
- 1.0.4 — 2021-04-25
- 1.0.3 — 2021-04-11
- 1.0.2 — 2021-03-18
- 1.0.1 — 2021-03-05
- 1.0.0 — 2021-03-05

## README

![logo](https://user-images.githubusercontent.com/19271573/110070733-fe2ab700-7d50-11eb-84e4-f0a6ea17cf35.png)

# @upnread/post-renderer
## You can use this library in any of your React projects.

[Upnread](https://upnread.com) is a CMS that help companies and users to build custom blogs! You can install **@upnread/post-renderer** library to render your amazing posts that you have created on your account.

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

### Note
Before installing this library make sure that you have created an account in [Upnread](https://upnread.com)

## Install

```bash
npm install --save @upnread/post-renderer
```

## Read our documentation!
Enter to our [documentation](https://upnread.com/docs), we have a list of end points you can use to get your posts and build your custom blog.

---

## Params
| Param | required | value |
| ------------- | ------------- | ------------- |
| post  | yes  | You need to the send **post.body** prop |
| primary_color  | No | You can send **post.blog.primary_color** prop or just send any primary color HEX code |


## You can request your post by id or by slug

### Example of usage

```jsx
import React from 'react'
import PostRenderer, { getPost } from '@upnread/post-renderer'

async function fetchSinglePost() {
  const response = await getPost({
    slug: 'Your post slug',
    token: 'Your secret token'
  })

  return response
}

const App = () => {
  const [post, setPost] = React.useState({
    body: '',
    blog: { primary_color: '' }
  })

  React.useEffect(() => {
    async function fetchPost() {
      const { data } = await fetchSinglePost()
      setPost(data)
    }

    fetchPost()
  }, [])

  return (
    <PostRenderer primaryColor={post.blog.primary_color} post={post.body} />
  )
}

export default App


```

## Visit our web site
[https://upnread.com](https://upnread.com)

---
_Source: https://npm.io/package/@upnread/post-renderer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._