diff --git a/LICENSE.md b/LICENSE.md index 6caebd7..223d215 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,4 +1,4 @@ -Copyright (c) 2004-2018 Marvin Frachet +Copyright (c) 2004-Today Marvin Frachet Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the @@ -17,4 +17,4 @@ 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. \ No newline at end of file +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/docs/ANIMATIONS.md b/docs/ANIMATIONS.md index dbdbc91..9713b51 100644 --- a/docs/ANIMATIONS.md +++ b/docs/ANIMATIONS.md @@ -10,17 +10,50 @@ You can contribute by creating your own placeholder animations and submitting a ## 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. +It's also possible to create custom animations using the `customAnimation` props of the `Placeholder` component: -From the [Example Folder](./Example/customAnimation.js), we have created a simple animation based on color transitions. +```jsx + + + + + + +``` -To use this in the code, simply use a `Placeholder` component with the `customAnimate` props : +The `ColorAnimation` can be defined this way: ```javascript - - Media loaded - +import React from "react"; +import { Animated } from "react-native"; + +export const ColorAnimation = ({ children }) => { + const animation = new Animated.Value(0); + + function start() { + return Animated.timing(animation, { + toValue: 100, + duration: 1500 + }).start(e => { + if (e.finished) { + start(); + } + }); + } + + start(); + + const backgroundColor = animation.interpolate({ + inputRange: [0, 50, 100], + outputRange: ["yellow", "orange", "blue"] + }); + + const style = { backgroundColor, padding: 20 }; + + return {children}; +}; ``` diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md index b4ce4a8..c93512f 100644 --- a/docs/COMPONENTS.md +++ b/docs/COMPONENTS.md @@ -15,7 +15,7 @@ ### Composable API -```jsx +```javascript import Placeholder, { Line, Media } from "rn-placeholder"; export const Compo = () => { @@ -42,7 +42,7 @@ export const Compo = () => { ### Paragraph -```jsx +```javascript import { Paragraph } from "rn-placeholder"; export const Compo = () => { @@ -70,7 +70,7 @@ export const Compo = () => { ### ImageContent -```jsx +```javascript import { ImageContent } from "rn-placeholder"; export const Compo = () => { @@ -102,7 +102,7 @@ export const Compo = () => { #### By composing -```jsx +```javascript { #### Using an HoC -```jsx +```javascript import { connect } from "rn-placeholder"; const TextHoc = connect(() => Hello world); diff --git a/package.json b/package.json index 8362eff..ea97685 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "rn-placeholder", "version": "1.3.3", "private": false, + "license": "./LICENSE.md", "main": "./src/index.js", "homepage": "https://github.com/mfrachet/rn-placeholder", "repository": {