react-polaroid

React polaroid component - card

Install

yarn add react-polaroid

Tests

CI by Travis-CI

Testing done by Jest, Sinon, Enzyme, react-test-renderer

yarn test

Or

yarn test --watch

Generate coverage report

yarn test-coverage

Usage

import React, { Component } from "react";

import Polaroid from "react-polaroid";

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      flip: false
    };
  }
  flip = () => {
    this.setState({
      flip: !this.state.flip
    });
  };

  render() {
    return (
      <div>
        <Polaroid
          frontText="Polaroid kitty - front with default flip"
          rotation={0}
          flip={this.state.flip}
          onClick={() => this.flip()}
        />
      </div>
    );
  }
}

Polaroid (component)

Demo

https://matejturay.github.io/react-polaroid/

Test Coverage

You can find detailed report in ./coverage folder

| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Lines | | --------- | ------- | -------- | ------- | ------- | --------------- | | All files | 100 | 94.44 | 100 | 100 | | | index.js | 100 | 94.44 | 100 | 100 | 71 |

Props

| Name | Type | Default | Description | Required | | :-------: | :----: | :--------------------- | :--------------------------------------: | :------: | | frontText | string | Polaroid kitty - front | Text on the back of the polaroid | no | | backText | string | Polaroid kitty - back | Text on the back of the polaroid | no | | cardColor | string | white | Optional background color prop | no | | width | number | 220 | Width of component | no | | height | number | 400 | Height of component | no | | disabled | bool | false | Disable flipping | no | | flip | bool | false | Control flipping between front and back | no | | style | object | {} | Style to customize the component wrapper | no | | imgSrc | string | placecat.jpg | Image uri | no | | type | enum | default | Animation type (side or default) | no | | rotation | number | 0 | Rotation of the component | no |

License

MIT © MatejTuray