# react-juicer-jola-interactive

> Jola fork from react-juicer

Latest version **1.0.1** (published 2020-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-juicer-jola-interactive
pnpm add react-juicer-jola-interactive
yarn add react-juicer-jola-interactive
bun add react-juicer-jola-interactive
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-01-27 |
| First published | 2020-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 47.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | dusandj88jola |

## Links

- npm: https://www.npmjs.com/package/react-juicer-jola-interactive
- Repository: https://github.com/dusan88nisjola/react-juicer
- Homepage: https://github.com/dusan88nisjola/react-juicer#readme
- Issues: https://github.com/dusan88nisjola/react-juicer/issues
- npm.io page: https://npm.io/package/react-juicer-jola-interactive

## Dependencies (4)

- [polished](https://npm.io/package/polished.md) ^2.3.1
- [react-modal](https://npm.io/package/react-modal.md) ^3.6.1
- [styled-media-query](https://npm.io/package/styled-media-query.md) ^2.0.2
- [react-bottom-scroll-listener](https://npm.io/package/react-bottom-scroll-listener.md) ^1.3.0

## Recent versions

- 1.0.1 (latest) — 2020-01-27
- 1.0.0 — 2020-01-27

## README

# react-juicer

A feed of social media image posts using React and Juicer API.

## Usage

```
yarn add react-juicer
```

```
import ReactJuicer from 'react-juicer';

const JuicerFeed = () => (
  <ReactJuicer
    feedId="juicer-feed-id"
    imagesPer={30}
  />
);
```

## Props

| Name                |        Type         | Default                    | Description                                                           |
| ------------------- | :-----------------: | :------------------------- | --------------------------------------------------------------------- |
| **feedId**          | `String (required)` |                            | Required Juicer ID - the feed the component reads                     |
| **imagesPer**       | `Number (required)` |                            | Number of items to load every time API is called                      |
| **initialLimit**    |      `Number`       |                            | Number of items to display on first render                            |
| **disableLoadMore** |      `Boolean`      | `false`                    | Optionally remove disable load more button                            |
| **disableOnScroll** |      `Boolean`      | `false`                    | Optionally disable loading more items on scroll                       |
| **renderFail**      |     `Function`      |                            | Optionally override component that displays when could not fetch feed |
| **renderLoading**   |     `Function`      |                            | Optionally override component that displays when loading              |
| **theme**           |      `Object`       | `defaultTheme (see below)` | Optionally a theme object to style feed                               |

## Theme

A theme object can be passed to modify the default theme below

```
const defaultTheme = {
  feedItem: {
    color: '#ffffff',
    backgroundColor: '#000000',
  },
  media: media,
  columns: {
    default: 2,
    medium: 4,
    large: 6,
  },
  button: {
    padding: '0.75rem 1.25rem',
    color: 'white',
    backgroundColor: 'black',
    backgroundColorHover: 'black',
    borderRadius: rem(4),
    margin: '2rem auto',
  },
  anchorButton: {
    padding: '0.75rem 1.25rem',
    color: 'white',
    backgroundColor: 'black',
    backgroundColorHover: 'black',
    borderRadius: rem(4),
    margin: '0',
  },
};

```

Media is derived from `styled-media-query` which generates the breakpoints to display the number of columns of the feed

```
const media = generateMedia({
  huge: '1440px',
  large: '1170px',
  medium: '768px',
  small: '450px',
});
```

## Debugging & Examples

Build react-juicer

```
yarn && yarn run install-peers

yarn run build
```

Create a react server using react scripts to display example

```
yarn run examples
```

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