-
Notifications
You must be signed in to change notification settings - Fork 178
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(chore): fixing chore documentation (#53)
- Loading branch information
Marvin Frachet
committed
Aug 17, 2018
1 parent
274503b
commit f75fc48
Showing
38 changed files
with
805 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | ||
| <title>rn-placeholder</title> | ||
| <meta name="description" content="Display some placeholder stuff before rendering your text or media content in React Native"> | ||
| <script src="https://snack.expo.io/embed.js"></script> | ||
|
|
||
| <link rel="preload" href="/rn-placeholder/assets/css/0.styles.8edcaad7.css" as="style"><link rel="preload" href="/rn-placeholder/assets/js/app.529775da.js" as="script"><link rel="prefetch" href="/rn-placeholder/assets/js/2.4d942548.js"><link rel="prefetch" href="/rn-placeholder/assets/js/3.cc186159.js"><link rel="prefetch" href="/rn-placeholder/assets/js/4.99493320.js"><link rel="prefetch" href="/rn-placeholder/assets/js/5.2bb67639.js"><link rel="prefetch" href="/rn-placeholder/assets/js/6.cbe27766.js"><link rel="prefetch" href="/rn-placeholder/assets/js/7.e12360b3.js"><link rel="prefetch" href="/rn-placeholder/assets/js/8.0f8be7cd.js"><link rel="prefetch" href="/rn-placeholder/assets/js/9.b3f5712a.js"><link rel="prefetch" href="/rn-placeholder/assets/js/10.f0236cb1.js"><link rel="prefetch" href="/rn-placeholder/assets/js/11.2d89ff83.js"><link rel="prefetch" href="/rn-placeholder/assets/js/12.2d609ec6.js"><link rel="prefetch" href="/rn-placeholder/assets/js/13.61487fb5.js"><link rel="prefetch" href="/rn-placeholder/assets/js/14.9871b647.js"> | ||
| <link rel="stylesheet" href="/rn-placeholder/assets/css/0.styles.8edcaad7.css"> | ||
| </head> | ||
| <body> | ||
| <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/rn-placeholder/" class="router-link-active">Take me home.</a></div></div></div> | ||
| <script src="/rn-placeholder/assets/js/app.529775da.js" defer></script> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | ||
| <title>Built in | rn-placeholder</title> | ||
| <meta name="description" content="Display some placeholder stuff before rendering your text or media content in React Native"> | ||
| <script src="https://snack.expo.io/embed.js"></script> | ||
|
|
||
| <link rel="preload" href="/rn-placeholder/assets/css/0.styles.8edcaad7.css" as="style"><link rel="preload" href="/rn-placeholder/assets/js/app.529775da.js" as="script"><link rel="preload" href="/rn-placeholder/assets/js/5.2bb67639.js" as="script"><link rel="prefetch" href="/rn-placeholder/assets/js/2.4d942548.js"><link rel="prefetch" href="/rn-placeholder/assets/js/3.cc186159.js"><link rel="prefetch" href="/rn-placeholder/assets/js/4.99493320.js"><link rel="prefetch" href="/rn-placeholder/assets/js/6.cbe27766.js"><link rel="prefetch" href="/rn-placeholder/assets/js/7.e12360b3.js"><link rel="prefetch" href="/rn-placeholder/assets/js/8.0f8be7cd.js"><link rel="prefetch" href="/rn-placeholder/assets/js/9.b3f5712a.js"><link rel="prefetch" href="/rn-placeholder/assets/js/10.f0236cb1.js"><link rel="prefetch" href="/rn-placeholder/assets/js/11.2d89ff83.js"><link rel="prefetch" href="/rn-placeholder/assets/js/12.2d609ec6.js"><link rel="prefetch" href="/rn-placeholder/assets/js/13.61487fb5.js"><link rel="prefetch" href="/rn-placeholder/assets/js/14.9871b647.js"> | ||
| <link rel="stylesheet" href="/rn-placeholder/assets/css/0.styles.8edcaad7.css"> | ||
| </head> | ||
| <body> | ||
| <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/rn-placeholder/" class="home-link router-link-active"><!----> <span class="site-name">rn-placeholder</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://www.linkedin.com/in/marvin-frachet-49165365/" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://twitter.com/mfrachet" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/mfrachet" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| Github | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://medium.com/@mfrachet" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| Medium | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://www.linkedin.com/in/marvin-frachet-49165365/" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://twitter.com/mfrachet" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/mfrachet" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| Github | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://medium.com/@mfrachet" target="_blank" rel="noopener noreferrer" class="nav-link external"> | ||
| Medium | ||
| <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>Getting started</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/rn-placeholder/getting-started/installation.html" class="sidebar-link">Installation</a></li><li><a href="/rn-placeholder/getting-started/example.html" class="sidebar-link">Example</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Components available</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/rn-placeholder/components/line.html" class="sidebar-link">Line</a></li><li><a href="/rn-placeholder/components/media.html" class="sidebar-link">Media</a></li><li><a href="/rn-placeholder/components/paragraph.html" class="sidebar-link">Paragraph</a></li><li><a href="/rn-placeholder/components/imagecontent.html" class="sidebar-link">ImageContent</a></li><li><a href="/rn-placeholder/components/multiwords.html" class="sidebar-link">MultiWords</a></li><li><a href="/rn-placeholder/customize/component.html" class="sidebar-link">Custom component</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Animations</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/rn-placeholder/animations/builtin.html" class="active sidebar-link">Built in</a></li><li><a href="/rn-placeholder/customize/animation.html" class="sidebar-link">Custom animation</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="built-in"><a href="#built-in" aria-hidden="true" class="header-anchor">#</a> Built in</h1> <p>The project comes with a <code>connect</code> HOC that brings three global props to every components, <code>onReady</code>, <code>customAnimate</code> and <code>animate</code>.</p> <p>The <code>animate</code> props uses built in animations such as <a href="https://github.com/mfrachet/rn-placeholder/tree/master/src/animation/shine.js" target="_blank" rel="noopener noreferrer"><code>shine</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> or <a href="https://github.com/mfrachet/rn-placeholder/tree/master/src/animation/fade.js" target="_blank" rel="noopener noreferrer"><code>fade</code><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> to animate the placeHolder with a visual effect while waiting for the content to appear.</p> <p>If you want to display a built in animation, simply specify the props on your <code>Placeholder</code> component :</p> <p align="center"><img src="/rn-placeholder/e56399e6c801b375ed2a1c2e314d74c6.gif"></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Placeholder.ImageContent</span> | ||
| <span class="token attr-name">onReady</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isReady<span class="token punctuation">}</span></span> | ||
| <span class="token attr-name">lineNumber</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> | ||
| <span class="token attr-name">animate</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>shine<span class="token punctuation">"</span></span> | ||
| <span class="token attr-name">lastLineWidth</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>40%<span class="token punctuation">"</span></span> | ||
| <span class="token punctuation">></span></span><span class="token plain-text"> | ||
| </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Text</span><span class="token punctuation">></span></span><span class="token plain-text">Animated placeholder</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Text</span><span class="token punctuation">></span></span><span class="token plain-text"> | ||
| </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Placeholder.ImageContent</span><span class="token punctuation">></span></span> | ||
| </code></pre></div></div> <div class="page-edit"><!----> <!----></div> <div class="page-nav"><p class="inner"><span class="prev"> | ||
| ← | ||
| <a href="/rn-placeholder/customize/component.html" class="prev"> | ||
| Custom component | ||
| </a></span> <span class="next"><a href="/rn-placeholder/customize/animation.html"> | ||
| Custom animation | ||
| </a> | ||
| → | ||
| </span></p></div> </div> <!----></div></div> | ||
| <script src="/rn-placeholder/assets/js/5.2bb67639.js" defer></script><script src="/rn-placeholder/assets/js/app.529775da.js" defer></script> | ||
| </body> | ||
| </html> |
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.