From 2d399071e1b0bfff2c9ba70eebae99e0e2420af0 Mon Sep 17 00:00:00 2001 From: smakosh Date: Thu, 27 Jun 2019 19:22:00 +0100 Subject: [PATCH] fix: update docs --- LICENSE.md | 21 ++++++++++++ README.md | 93 +++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 106 insertions(+), 8 deletions(-) create mode 100644 LICENSE.md diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..26998b2 --- /dev/null +++ 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 index d465a3c..81a5865 100644 --- 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 = () => ( +
+

Example

+ + {myList.map(({ title }, i) => ( + +
+

{title}

+
+ + ))} + +
+); + +render(, 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)