# Components
The project currently supports 5 different placeholder components.
Each of this components are wrapped in a HOC that brings two others (optional) props :
- `animate: String`: An optional animation available in the `src/animations` folder (see also [Animations](ANIMATIONS.md)
- `onReady: any`: A value. If it's different from `null` / `undefined` / `empty string` / `0`, the component children are rendered. This props creates the loading feeling and the component apparition when content is loaded.
- `customAnimate: React.Component`: A custom animation represented by a `React.Component`
Navigate the API documentation :
- Line
- Media
- Paragraph
- Image content
- Box
- Custom components
Line
Display a simple line on the screen.
#### Props available
- `textSize: String`: Text size of the Line
- `color: String`: Color of the line
- `width: String`: Width of the line, percentage available
#### Example
```javascript
```
Media
Display a shape that represent a media placeholder
#### Props available
- `size: Number`: The size of the media shape (default: `40`)
- `hasRadius: Boolean`: Is the shape rounded or not ? (default: `false`)
- `color: String`: Color of the media shape (default: `#efefef`)
#### Example
```javascript
```
Paragraph
Display a set of lines called a Paragraph
#### Props available
- `lineNumber: Number`: Number of line to display (mandatory)
- `textSize: Number`: Text size of a single Line (default: `12`)
- `lineSpacing: Number`: Space between the lines (default: `12`)
- `color: String`: Color of the lines (default: `#efefef`)
- `width: String`: Width of the lines (default: `100%`)
- `lastLineWidth: String`: Custom width of the last line (default: `100%`)
- `firstLineWidth: String`: Custom width of the first line (default: `100%`)
#### Example
```javascript
```
Image content
Display a Media on the left / right part of a Paragraph
#### Props available
- `position: String`: The position of the Media (left / right) (default: `left`)
- `hasRadius: Boolean`: Is the shape of the media rounded or not ? (default: `false`)
- `lineNumber: Number`: Number of line to display (mandatory)
- `textSize: Number`: Text size of a single Line (default: `12`)
- `lineSpacing: Number`: Space between the lines (default: `12`)
- `color: String`: Color of the lines (default: `#efefef`)
- `width: String`: Width of the lines (default: `100%`)
- `lastLineWidth: String`: Custom width of the last line (default: `100%`)
- `firstLineWidth: String`: Custom width of the first line (default: `100%`)
#### Example
```javascript
```
Box
Display a generic rectangle shape with customisable width, height, color and border radius
#### Props available
- `height: Number | String`: the height of the component (default: `50`)
- `width: Number | String`: the width of the component (default: `50`)
- `radius: Number`: the border radius of the component (default: `0`)
- `color: String`: the background color of the component (default: `#efefef`)
#### Example
```javascript
```
Custom components
You can create your own placeholder component based on your own ones. Based on that, we're exposing a `Placeholder.connect` function that returns a new `ComponentContainer`.
This container allows you to use the `onReady` props that will automatically display the placeholder children when its value is true. It also gives you access to the `animate` props that works just as described before, and so, you can take advent from the prebuilt animations of this project.
Taken from the [Example/customPlaceholder.js](./Example/customPlaceholder.js) :
```javascript
import React from 'react';
import { Text } from 'react-native';
import Placeholder from 'rn-placeholder';
const customPlaceholder = (props) => {
const style = { backgroundColor: props.bgColor };
return I m a custom loader with props bgColor = {props.bgColor};
};
export default Placeholder.connect(customPlaceholder);
```