# @blog-o-matic/react

> Recat components for superior Blog-o-Matic integration

Latest version **4.5.1** (published 2019-10-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @blog-o-matic/react
pnpm add @blog-o-matic/react
yarn add @blog-o-matic/react
bun add @blog-o-matic/react
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.5.1 |
| Published | 2019-10-08 |
| First published | 2018-12-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 40.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Ben Pevsner |
| Maintainers | ivebencrazy |

## Links

- npm: https://www.npmjs.com/package/@blog-o-matic/react
- Repository: https://github.com/ivebencrazy/blog-o-matic
- Homepage: https://github.com/ivebencrazy/blog-o-matic#readme
- Issues: https://github.com/ivebencrazy/blog-o-matic/issues
- npm.io page: https://npm.io/package/@blog-o-matic/react

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.9.0
- [marksy](https://npm.io/package/marksy.md) ^8.0.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.15.10
- [@civility/react](https://npm.io/package/@civility/react.md) ^0.2.1
- [@civility/utilities](https://npm.io/package/@civility/utilities.md) ^0.2.1

## Recent versions

- 4.5.1 (latest) — 2019-10-08
- 4.5.0 — 2019-10-08
- 4.4.3 — 2019-09-19
- 4.4.2 — 2019-09-19
- 4.4.1 — 2019-09-16
- 4.3.7 — 2019-02-06
- 4.3.4 — 2019-02-01
- 4.3.2 — 2019-01-30
- 4.3.1 — 2019-01-28
- 4.3.0 — 2019-01-21
- 4.2.3 — 2019-01-10
- 4.2.2 — 2019-01-10
- 4.1.0 — 2018-12-25
- 4.0.4 — 2018-12-16

## README

Blog-o-Matic React
===
`@blog-o-matic/react` is a library of Blog-o-Matic-aware React components. These components are also used to build the Blog-o-Matic editor. A component library is helpful because it lets us take advantage of end-to-end awareness of context.

For Example...
---

### Progressive Image Component
```jsx
import { ProgressiveImage } from "@blog-o-matic/react"

// 1. Load and blurs image https://static.bpev.me/micro/my-image.WebP
// 2. Load image https://static.bpev.me/medium/my-image.WebP
// 3. On-click, show image https://static.bpev.me/large/my-image.WebP
<ProgressiveImage src="/my-image.jpg" />
```

### Context
```jsx
import { Blog, Post } from "@blog-o-matic/react"

<Blog root="https://static.bpev.me">
  {/* Images already have width/height available via post metadata + context */}
  {/* Image lists are combined into tile */}
  <Post name="my-blog-post" />
</Blog>
```

Usage
---
Blog-o-Matic depends on use of [Civility]() (and by extension, [Basscss](http://basscss.com/)) styles. It uses [Highlight.js]() for code snippets.

```css
@import "@civility/stylesheets/dist/civility.css";
@import "highlight.js/styles/ocean.css";
```

```jsx

```

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