Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix security vulnerability in dep #49

Merged
merged 2 commits into from
Jun 25, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
{
"presets": ["env", "react", "stage-0"],
"plugins": ["babel-plugin-add-module-exports"]
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-function-bind"
]
}
41 changes: 26 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,35 @@ CSS goes to [David Walsh](https://davidwalsh.name/css-flip).

Live demo: [Demo](https://aaronccwong.github.io/react-card-flip/)

To build the examples locally, run:
To build the examples locally with npm, run:

```
npm install
npm run build-example && npm run start
```

To build the examples locally with yarn, run:

```
yarn install
yarn start
yarn build-example && yarn start
```

Then [`localhost:8080`](http://localhost:8080) should open in a browser. If not
you can go to that directly.

## Installation

The easiest way to use react-card-flip is to install it from NPM with the
command:
To use react-card-flip, install it from NPM with npm using the command:

```
npm install --save react-card-flip
```

To use react-card-flip, install it from NPM with yarn using the command:

```
yarn add react-card-flip
yarn add --dev react-card-flip
```

You can also use the standalone build by including `lib/react-card-flip.js` in
Expand Down Expand Up @@ -55,7 +67,7 @@ control whether to show the front or the back of the card.
class App extends React.Component {
constructor() {
super();
this.state = {
this.state = {
isFlipped: false
};
this.handleClick = this.handleClick.bind(this);
Expand All @@ -72,12 +84,12 @@ class App extends React.Component {
<YOUR_FRONT_CCOMPONENT key="front">
This is the front of the card.
<button onClick={this.handleClick}>Click to flip</button>
</FrontComponent>
</YOUR_FRONT_CCOMPONENT>

<YOUR_BACK_COMPONENT key="back">
This is the back of the card.
<button onClick={this.handleClick}>Click to flip</button>
</BackComponent>
</YOUR_BACK_COMPONENT>
</ReactCardFlip>
)
}
Expand Down Expand Up @@ -108,22 +120,21 @@ component as the back of the card.

## Development (`src`, `lib` and the build process)

**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `lib`, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run `yarn start`. If you just want to watch changes to `src` and rebuild `lib`, run `yarn watch` (this is useful if you are working with `npm link`).
To build, watch and serve the examples (which will also watch the component source), run `npm run build-example && npm run start`.

## Testing

To run tests for this project run one of the following commands:

- `yarn test` - Runs tests then exits
- `yarn test:watch` - Runs tests in watch mode
- `yarn test:coverage` - Runs tests and creates a coverage report
- `npm run test` - Runs tests then exits
- `npm run test:watch` - Runs tests in watch mode
- `npm run test:coverage` - Runs tests and creates a coverage report

## Contributing

Fork this repo, add your proposed features and make a pull request. I will
review as soon as possible.
Fork this repo, add your proposed features and make a pull request. I will review as soon as possible.

## License

Expand Down
42 changes: 21 additions & 21 deletions example/build/main.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions jestSetup.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import "@babel/polyfill";

Enzyme.configure({ adapter: new Adapter() });
6 changes: 3 additions & 3 deletions lib/react-card-flip.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/react-card-flip.js.map

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions lib/react-card-flip.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/react-card-flip.min.js.map

Large diffs are not rendered by default.

Loading