1.0.1 • Published 7 years ago
react-polaroid v1.0.1
react-polaroid
React polaroid component - card
Install
yarn add react-polaroidTests
CI by Travis-CI
Testing done by Jest, Sinon, Enzyme, react-test-renderer
yarn testOr
yarn test --watchGenerate coverage report
yarn test-coverageUsage
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