diff --git a/.github/workflows/codecov.yml b/.github/workflows/codecov.yml
new file mode 100644
index 0000000..9edf9a9
--- /dev/null
+++ b/.github/workflows/codecov.yml
@@ -0,0 +1,28 @@
+name: Codecov CI
+
+on:
+ push:
+ branches: [main]
+ pull_request:
+ branches: [main]
+
+jobs:
+ coverage:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Use Node.js
+ uses: actions/setup-node@v2
+
+ - name: Download Deps
+ uses: bahmutov/npm-install@v1
+ with:
+ useLockFile: false
+
+ - name: Generate Coverage Report
+ - run: npm run test-ci -- --coverage
+
+ - name: Upload coverage to Codecov
+ uses: codecov/codecov-action@v2
diff --git a/README.md b/README.md
index 189f340..fd39f94 100644
--- a/README.md
+++ b/README.md
@@ -32,52 +32,106 @@ $ yarn add react-plock
$ npm install react-plock
```
-The most simple way to use Plock is to import it in your React app:
+The simplest way to use Plock is to import it in your React app:
```jsx
-
- I'm a super component! 😎
- I'm a super component too! 🤓
- Don't forget me! 😏
-
+import { Plock } from "react-plock";
+
+export function Komponent() {
+ return (
+
+ Sun is shining ☀️
+ Moon is shining 🌙
+ Stars are shining ✨
+
+ );
+}
```
And that's it! 🎉 🎉 🎉 By default, Plock will use the `grid` layout with three columns. You can also override this prop by setting the `nColumns` prop:
```jsx
-
- 1
- 2
- 3
- 4
-
+import { Plock } from "react-plock";
+
+const Tile = ({ children, style, ...rest }) => (
+
+ {children}
+
+);
+
+export function Komponent() {
+ return (
+
+ I love Plock! 💙
+ I love React! 💛
+ I love Javascript! 💝
+ Give us a Star! 🌟
+
+ );
+}
+```
+
+If you need different breakpoints, you can use pass an array like this:
+
+```jsx
+import { Plock } from "react-plock";
+
+export function Komponent() {
+ const breakpoints = [
+ { size: 640, columns: 1 },
+ { size: 768, columns: 2 },
+ { size: 1024, columns: 3 },
+ { size: 1280, columns: 6 },
+ ];
+
+ return (
+
+ Pikachu
+ Charmander
+ Squirtle
+ Bulbasaur
+
+ );
+}
```
Also the gap between columns can be set by setting the `gap` prop:
```jsx
-
- 1
- 2
- 3
- 4
-
+import { Plock } from "react-plock";
+
+export function Komponent() {
+ return (
+
+ Pikachu
+ Charmander
+ Squirtle
+ Bulbasaur
+
+ );
+}
```
Needs also some extra styling? No problem, you can extend the default styles by setting the `style` or the `className` prop:
```jsx
-
- 1
- 2
- 3
- 4
-
+import { Plock } from "react-plock";
+
+export function Komponent() {
+ return (
+
+ Pikachu
+ Charmander
+ Squirtle
+ Bulbasaur
+
+ );
+}
```
### Built With 🏗️
-- [ReactJS](https://reactjs.org/) - React
+- [ReactJS](https://reactjs.org/)
### Versioning 🚦
diff --git a/package.json b/package.json
index ca5e702..f1045fa 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
},
"jest": {
"collectCoverageFrom": [
- "src/**/{!(App.js),}.js"
+ "src/components/*.js"
]
},
"browserslist": {