diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..8b709d7
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+ "extends": "react-app",
+ "rules": {
+ "@typescript-eslint/no-angle-bracket-type-assertion": 0 // I don't know wtf it is
+ }
+}
diff --git a/.gitignore b/.gitignore
index 1e6c499..68e5d62 100755
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ yarn-error.log
node_modules
dist
coverage
+/native
.docz/
.rpt2_cache
settings.json
diff --git a/.travis.yml b/.travis.yml
index c367950..a8a0554 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,16 +1,14 @@
language: node_js
sudo: false
node_js:
- - 9
+ - 10
cache:
directories:
- node_modules
install:
- npm install
- - npm install -g codecov
script:
- npm run test
- npm run build
after_success:
- - npm run coverage
- npm run release
diff --git a/README.md b/README.md
index f876011..ca84f96 100755
--- a/README.md
+++ b/README.md
@@ -5,26 +5,28 @@
-SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
+SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).
## Features
-- :gear: **Customizable:** Feel free to change the colors, speed, sizes and even **RTL**;
-- :ok_hand: **Plug and play:** with many presets to use, see the [examples](#examples);
-- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.github.io/create-content-loader/) to create your own custom loaders easily;
-- ⚛️ **Lightweight:** only **1.4kB** gzipped and **0 dependencies**;
+- :gear: **Customizable:** Feel free to change the colors, speed, sizes and even **RTL**;
+- :ok_hand: **Plug and play:** with many presets to use, see the [examples](#examples);
+- :pencil2: **DIY:** use the [create-content-loader](https://danilowoz.github.io/create-content-loader/) to create your own custom loaders easily;
+- 📱 **React Native support**: same API, as same powerful features;
+- ⚛️ **Really lightweight:** less than **2kB** and **0 dependencies** for web version;
## Index
-- [Getting Started](#getting-started)
+- [Getting Started](#getting-started)
- [Usage](#usage)
+ - [Native](#native)
- [Options](#options)
- [Examples](#examples)
-- [Similar packages](#similar-packages)
+- [Similar packages](#similar-packages)
- [Development](#development)
-- [Known Issues](#known-issues)
+- [Known Issues](#known-issues)
-## Getting Started
+## Getting Started
```sh
npm i react-content-loader --save
@@ -34,13 +36,13 @@ npm i react-content-loader --save
yarn add react-content-loader
```
-CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
+CDN from [JSDELIVR](https://www.jsdelivr.com/package/npm/react-content-loader)
## Usage
-There are two ways to use it:
+There are two ways to use it:
-**1. Presets, see the [examples](#examples):**
+**1. Presets, see the [examples](#examples):**
```jsx
import ContentLoader, { Facebook } from 'react-content-loader'
@@ -49,12 +51,12 @@ const MyLoader = () =>
const MyFacebookLoader = () =>
```
-**2. Custom mode, see the [online tool](https://danilowoz.github.io/create-react-content-loader/)**
+**2. Custom mode, see the [online tool](https://danilowoz.github.io/create-react-content-loader/)**
```jsx
const MyLoader = () => (
- {/* Only SVG shapes */}
+ {/* Only SVG shapes */}
@@ -65,79 +67,110 @@ const MyLoader = () => (
**Still not clear?** Take a look at this working example at [codesandbox.io](https://codesandbox.io/s/moojk887z9)
Or try the components editable demo hands-on and install it from [bit.dev](https://bit.dev/danilowoz/react-content-loader)
+## Native
+
+`react-content-loader` can be used with React Native in the same way as web version with the same import:
+
+**1. Presets, see the [examples](#examples):**
+
+```jsx
+import ContentLoader, { Facebook } from 'react-content-loader/native'
+
+const MyLoader = () =>
+const MyFacebookLoader = () =>
+```
+
+**2. Custom mode**
+
+**To create custom loaders there is an important difference:** as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from [react-native-svg](https://github.com/react-native-community/react-native-svg) or use the named export Rect and Circle from `react-content-loader` import:
+
+```jsx
+import ContentLoader, { Rect, Circle } from 'react-content-loader/native'
+
+const MyLoader = () => (
+
+
+
+
+
+
+)
+```
+
## Options
#### **`animate?: boolean`**
-Defaults to `true`. Opt-out of animations with `false`
+Defaults to `true`. Opt-out of animations with `false`
-#### **`ariaLabel? string | boolean`**
+#### **`ariaLabel? string | boolean`** - _Web only_
-Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
+Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
-#### **`baseUrl? string`**
+#### **`baseUrl? string`** - _Web only_
-Required if you're using `` in your ``. Defaults to an empty string. This prop is common used as: `` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
+Required if you're using `` document ``.
+Defaults to an empty string. This prop is common used as: `