1.0.1 • Published 5 years ago
react-polaroid v1.0.1
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