fix: update docs

smakosh · Jun 27, 2019 · 2d39907 · 2d39907
1 parent 94605c4
commit 2d39907
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 8 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Smakosh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -2,15 +2,92 @@
 
 [![Travis][build-badge]][build]
 [![npm package][npm-badge]][npm]
-[![Coveralls][coveralls-badge]][coveralls]
 
-Describe react-flex-ready here.
-
-[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
-[build]: https://travis-ci.org/user/repo
+[build-badge]: https://img.shields.io/travis/smakosh/react-flex-ready/master.png?style=flat-square
+[build]: https://travis-ci.org/smakosh/react-flex-ready
 
 [npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
-[npm]: https://www.npmjs.org/package/npm-package
+[npm]: https://www.npmjs.org/package/react-flex-ready
+
+## Getting started
+
+```bash
+npm i react-flex-ready
+```
+
+Or
+
+```bash
+yarn add react-flex-ready
+```
+
+```jsx
+import React from "react";
+import { render } from "react-dom";
+import { Flex, Item } from "react-flex-ready";
+
+const myList = [{ title: "first" }, { title: "second" }, { title: "third" }];
+
+const Demo = () => (
+    <div>
+        <h1>Example</h1>
+        <Flex>
+            {myList.map(({ title }, i) => (
+                <Item key={i} col="3" colTablet="3" colMobile="1" stretch>
+                  <div
+                    style={{
+                      textAlign: "center",
+                      width: "100%",
+                      border: "1px solid #eee"
+                    }}
+                  >
+                        <h1>{title}</h1>
+                    </div>
+                </Item>
+            ))}
+        </Flex>
+    </div>
+);
+
+render(<Demo />, document.querySelector("#root"));
+```
+
+## Props
+
+### Flex
+
+These docs are inspired by reactjs-popup docs
+
+| Option               | Default           | Type           | Description                                                                                                                                                                                                                                                           |
+| -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| align              | center                  | {string}    | The way you want to align your items (`align-items`)                                                                                                                                                                                                            |
+| col                 | 1                  | {string}         | How many columns you have within your grid
+
+### Item
+
+| Option               | Default           | Type           | Description                                                                                                                                                                                                                                                           |
+| -------------------- | ----------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| col              | 1                  | {string}    | How many columns of 12 your item will take on desktop                                                                                                                                                                                                            |
+| col                 | 1                  | {string}         | How many columns you have within your grid
+| colTablet              | 1                  | {string}    | How many columns of 12 your item will take on tablet
+| colMobile                 | 1                  | {string}         | How many columns of 12 your item will take on mobile
+| marginBottom              | `3rem`                  | {string}    | Margin bottom of your item, last item always has 0 on mobile
+| stretch                 | false                  | {bool}         | Whether you want the items to have the same height or not
+
+## Built with
+
+- React & Styled-components
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
+
+## Contributors
+
+- [Myself](https://smakosh.com)
+
+## Support
+
+If you love this React component and want to support me, you can do so through my Patreon
 
-[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
-[coveralls]: https://coveralls.io/github/user/repo
+[![Support me on Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/smakosh)