react-juicer v1.1.3

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

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