diff --git a/README.md b/README.md index df6fd4d..9d39335 100755 --- a/README.md +++ b/README.md @@ -1,89 +1,71 @@

- React Content Loader + react-content-loader +

+

+ Example's react-content-loader

React component that uses SVG to create a collection of loaders which simulates the structure of the -content that will be loaded, similar to Facebook cards loaders. **Use the -[online tool](https://github.com/danilowoz/create-react-content-loader) to create your own custom -loader.** +content that will be loaded, similar to Facebook cards loaders. -If you are looking for -[React Native](https://github.com/virusvn/react-native-svg-animated-linear-gradient), -[Preact](https://github.com/bonitasoft/preact-content-loader) or -[Vue.js](https://github.com/LucasLeandro1204/vue-content-loading) +## Features -## Installation +* **Complety customizable:** you can change the colors, speed and sizes; +* **Create your own loading:** use the + [create-react-content-loader](https://danilowoz.github.io/create-react-content-loader/) to create + your customs loadings easily; +* **You can use right now:** there are a lot of presets to use the loader, see the + [options](#options); +* **Perfomance:** react-content-loader uses pure SVG to work, so it's works without any javascript, + canvas, etc; -**Using npm:** +## Usage -```sh -npm i react-content-loader --save -``` +### Installation -**Using Yarn:** +Yarn: `$ yarn add react-content-loader` -```sh -yarn add react-content-loader -``` +Npm: `$ npm i react-content-loader --save` -## You can use it in two ways: - -**Stylized:** [example](#facebook-style) +**You can use it in two ways ([See the options)](#options):** ```jsx // import the component import ContentLoader from 'react-content-loader' -const MyLoader = () => { - return -} +const MyLoader = () => ``` -**Or in custom mode:** [example](#custom-style) - -Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for -your custom loaders +**Or in custom mode, using the +[online tool](https://danilowoz.github.io/create-react-content-loader/)** ```jsx -// import the component -import ContentLoader from 'react-content-loader' - -const MyLoader = () => { - return ( - - - - - - ) -} +const MyLoader = () => ( + + {/* Pure SVG */} + + + + +) ``` ## Options -| Name | Type | Default | Description | -| ------------------- | -------- | :-------------: | --------------------------------------------------------------- | -| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` | -| type | _String_ | `facebook` | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` | -| speed | _Number_ | `2` | Animation speed | -| width | _Number_ | `400` | **viewBox** width of SVG | -| height | _Number_ | `130` | **viewBox** height of SVG | -| primaryColor | _String_ | `#f3f3f3` | Background the SVG | -| secondaryColor | _String_ | `#ecebeb` | Animation color | +| Name | Type | Default | Description | +| ------------------- | -------- | --------------- | --------------------------------------------------------------- | +| type | _String_ | `facebook` | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` | +| speed | _Number_ | `2` | Animation speed | +| width | _Number_ | `400` | **viewBox** width of SVG | +| height | _Number_ | `130` | **viewBox** height of SVG | +| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` | +| primaryColor | _String_ | `#f3f3f3` | Background the SVG | +| secondaryColor | _String_ | `#ecebeb` | Animation color | | preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG | -| className | _String_ | '' | Classname in the | +| className | _String_ | '' | Classname in the | -**Custom element options:** - -| | x | y | radius | width | height | -| ---------- | -------- | -------- | -------- | :------: | :------: | -| **Rect** | _Number_ | _Number_ | _Number_ | _Number_ | _Number_ | -| **Circle** | _Number_ | _Number_ | _Number_ | – | – | - -Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for -your custom loaders - -## Examples +### Examples #### Facebook Style @@ -109,10 +91,27 @@ your custom loaders ![Code Style](https://cloud.githubusercontent.com/assets/4838076/22760218/aa619f32-ee3c-11e6-9cd1-c4af9dd1278e.gif) -#### Credits +## Alternatives -[Boilerplate for creating React Npm packages with ES2015](https://github.com/juliancwirko/react-npm-boilerplate) +* [React Native](https://github.com/virusvn/react-native-svg-animated-linear-gradient); +* [Preact](https://github.com/bonitasoft/preact-content-loader); +* [Vue.js](https://github.com/LucasLeandro1204/vue-content-loading); +* [Angular](https://github.com/Gbuomprisco/ngx-content-loading). -#### License +## Development -MIT +Fork the repo then clone it + +`$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader` + +Install the dependencies + +`$ yarn` + +Run the storybook to see your changes + +`$ yarn storybook` + +## License + +[MIT](https://github.com/danilowoz/react-content-loader/blob/master/LICENSE)