Skip to content

Commit

Permalink
doc(gitbook): Adding a gitbook to detail the use of the module (#29)
Browse files Browse the repository at this point in the history
* Usage + API

* Adding images

* Documentation + examples

* Generated book

* Fix Readme
  • Loading branch information
Marvin Frachet committed Oct 19, 2017
1 parent 1207fe1 commit 46ab2b6
Show file tree
Hide file tree
Showing 66 changed files with 7,286 additions and 65 deletions.
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
./Example
./book
64 changes: 2 additions & 62 deletions ANIMATIONS.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
# Animations

* <a href="#default">Default animations</a>
* <a href="#custom">Custom animations</a>
* <a href="#api">Animations API <span style="color:red">(deprecated in >=v1.0.0)</span></a>


<h2 name="default">Default animations</h2>
## Default animations

The project comes with some default animations located in [src/animation](./src/animation). It simply animates the placeholder with visual effects while waiting the real content to appear.

Expand All @@ -14,7 +10,7 @@ Adding an animation is possible using the [React Native Animated](https://facebo
You can contribute by creating your own placeholder animations and submitting a pull request.


<h2 name="custom">Custom animations</h2>
## Custom animations

Recently, the project has allowed to use custom animations by using the HoC props : `customAnimate`. It accepts a `React.Component` representing an Animation.

Expand All @@ -27,59 +23,3 @@ To use this in the code, simply use a `Placeholder` component with the `customAn
<Text>Media loaded</Text>
</Placeholder.Media>
```

<h2 name="API">Animations API</h2>

<span style="color:red">*This is deprecated since v1.0.0, use component instead of this API while working on version >=v1.0.0*</span>

Here's the constraints needed to use Animations inside of [rn-placeholder](./README.md)

**start**

Type: `function`

Start the animation

**style**

Type: `object`

Style of the application


*Example*
```javascript

/**
* Create a repetitive fadein / fadeout animation
*/
export default () => {
const START_VALUE = 0.5;
const animation = new Animated.Value(START_VALUE);

function start() {
return Animated.sequence([
Animated.timing(animation, {
toValue: 1,
duration: 500,
}),
Animated.timing(animation, {
toValue: START_VALUE,
duration: 500,
}),
]).start((e) => {
if (e.finished) {
start();
}
});
}

/**
* The two mandatory properties to return
*/
return {
style: { opacity: animation },
start,
};
};
```
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)



Display some placeholder stuff before rendering your text or media content in React Native.

*Fully compatible with [Expo](https://expo.io/) and [react-native-web](https://github.com/necolas/react-native-web), [see examples](./EXAMPLE.md)*

*New documentation available [mfrachet.github.io/rn-placeholder](https://mfrachet.github.io/rn-placeholder/)*

------
<p align="center">
<img height="270" src="https://img4.hostingpics.net/pics/221859android.gif" />
Expand All @@ -24,7 +25,6 @@ Display some placeholder stuff before rendering your text or media content in Re
- [Creating a custom component](./API.md#custom)
- [Using default animations](./ANIMATIONS.md#default)
- [Using a custom animation](./ANIMATIONS.md#custom)
- [Animation API](./ANIMATIONS.md) <span style="color:red">(deprecated in >=v1.0.0)</span>
- [Examples from React Native, Expo or React Native Web](./EXAMPLE.md)

<h1 name="#usage">Usage</h1>
Expand Down
18 changes: 18 additions & 0 deletions book/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# [RN-PLACEHOLDER](https://github.com/mfrachet/rn-placeholder)

[![Build Status](https://travis-ci.org/mfrachet/rn-placeholder.svg?branch=master)](https://travis-ci.org/mfrachet/rn-placeholder)
[![Coverage Status](https://coveralls.io/repos/github/mfrachet/rn-placeholder/badge.svg?branch=master)](https://coveralls.io/github/mfrachet/rn-placeholder?branch=master)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Display some placeholder stuff before rendering your text or media content in React Native.

*Fully compatible with [Expo](https://expo.io/) and [react-native-web](https://github.com/necolas/react-native-web)*

------
<p align="center">
<img height="240" src="https://img4.hostingpics.net/pics/221859android.gif" />
<img height="240" src="https://img4.hostingpics.net/pics/197702shineanimation.gif" />
<img height="240" src="https://img15.hostingpics.net/pics/449888rnweb.gif" />
</p>

------
22 changes: 22 additions & 0 deletions book/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Summary

* [Introduction](README.md)

### Getting started

* [Installation](./getting-started/INSTALLATION.md)
* [Example](./getting-started/EXAMPLE.md)

### Components

* [Line](./components/LINE.md)
* [Media](./components/MEDIA.md)
* [Paragraph](./components/PARAGRAPH.md)
* [ImageContent](./components/IMAGECONTENT.md)
* [MultiWords](./components/MULTIWORDS.md)
* [Custom component](./customize/CUSTOMCOMPONENT.md)

### Animations

* [Built in](./animations/BUILTIN.md)
* [Custom animation](./customize/CUSTOMANIMATION.md)
Loading

0 comments on commit 46ab2b6

Please sign in to comment.