# wp-react-stories

> A React-based, masonry-like display of categorized posts drawn from the WordPress REST API.

Latest version **0.1.2** (published 2018-02-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install wp-react-stories
pnpm add wp-react-stories
yarn add wp-react-stories
bun add wp-react-stories
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-02-06 |
| First published | 2018-02-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | John Watkins |
| Maintainers | johnwatkins0 |
| Keywords | react, wordpress |

## Links

- npm: https://www.npmjs.com/package/wp-react-stories
- npm.io page: https://npm.io/package/wp-react-stories

## Dependencies (8)

- [range](https://npm.io/package/range.md) 0.0.3
- [react](https://npm.io/package/react.md) ^16.2.0
- [date-fns](https://npm.io/package/date-fns.md) ^1.28.5
- [debounce](https://npm.io/package/debounce.md) ^1.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [styled-components](https://npm.io/package/styled-components.md) ^3.1.6
- [smoothscroll-polyfill](https://npm.io/package/smoothscroll-polyfill.md) ^0.4.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2018-02-06
- 0.1.1 — 2018-02-06
- 0.1.0 — 2018-02-06

## README

# wp-react-stories

A masonry-like display of posts from the WordPress REST API. Includes search and a category select input.

[Demo.](https://colbycommunications.github.io/wp-react-stories/demo/)

## Install

### Composer/WordPress

If you plan to use the WordPress shortcode, this library can be installed via Composer or activated as a WordPress plugin. To install via Composer, use:

```
composer require colbycomms/wp-react-stories
```

Note the WordPress parts of this plugin require **PHP 7.1 or higher**.

### From NPM

If you're not using the shortcode and plan to import this library into your ES6, Javascript, install it with npm:

```
npm install wp-react-stories
```

Or:

```
yarn add wp-react-stories
```

## Usage

### In ES6 Javascript

First, if you installed this library using Composer and plan to import the component into your Javascript, you need to prevent the plugin's compiled script from enqueuing. In your WordPress project, add the following filter:

```PHP
add_filter( 'colbycomms__stories__enqueue_script', '__return_false' );
```

Include the `Stories` component in your project, e.g.:

```Javascript
import React from 'react';
import ReactDOM from 'react';
import Stories from 'wp-react-stories';

const myContainer = document.querySelector('#my-container-element');
const myProps = {
    // See below.
}

ReactDOM.render(<Stories {...myProps} />, myContainer);
```

#### Props

##### `endpoint` {string} **required**

The WordPress REST endpoint from which to draw posts, e.g. `http://your-site.com/wp-json/wp/v2/posts/`. Custom endpoints must support the parameters `search`, `page`, `categories`, and `per_page`.

##### `categoriesEndpoint` {string} **required**

The WordPress REST endpoint from which to draw categories, e.g. `http://your-site.com/wp-json/wp/v2/categories/`.

##### `mediaEndpoint` {string} **required**

The WordPress REST endpoint from which to draw media, e.g. `http://your-site.com/wp-json/wp/v2/media/`.

##### perPage {string} **default = 12**

A numeric string for the number of posts to show per page.

### In WordPress

To use this plugin out of the box without any ES6 inclusion, simply install it with Composer or activate it as a plugin, then use this shortcode:

```HTML
[stories endpoint="http://my-site.com/wp-json/wp-v2/posts/"]
```

All the shortcode attributes have defaults (see below), so simply use `[stories]` if all the defaults apply.

#### Shortcode attributes

##### `endpoint` default = `get_bloginfo( 'url' ) . '/wp-json/wp/v2/posts/'`

The WordPress REST endpoint from which to draw posts.

##### `categories-endpoint` default = `get_bloginfo( 'url' ) . '/wp-json/wp/v2/categories/'`

The WordPress REST endpoint from which to draw categories.

##### `media-endpoint` default = `get_bloginfo( 'url' ) . '/wp-json/wp/v2/media/'`

The WordPress REST endpoint from which to draw media files.

##### `per-page` default = `'12'`

The number of posts to show per page.

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