Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mfrachet/rn-placeholder
🏖️ Display some placeholder stuff before rendering your text or media content in React Native
https://github.com/mfrachet/rn-placeholder
placeholder react react-native ux
Last synced: 3 days ago
JSON representation
🏖️ Display some placeholder stuff before rendering your text or media content in React Native
- Host: GitHub
- URL: https://github.com/mfrachet/rn-placeholder
- Owner: mfrachet
- License: mit
- Created: 2017-05-07T16:22:54.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-26T13:18:17.000Z (almost 2 years ago)
- Last Synced: 2025-01-15T10:34:48.498Z (11 days ago)
- Topics: placeholder, react, react-native, ux
- Language: TypeScript
- Homepage: https://mfrachet.github.io/rn-placeholder/
- Size: 13.3 MB
- Stars: 2,134
- Watchers: 12
- Forks: 183
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-react-native - rn-placeholder ★1139 - Display some placeholder stuff before rendering your text or media content in React Native (+ React Native Web!) (Components / UI)
- awesome-reactnative-ui - rn-placeholder - placeholder/master/./book/placeholder.gif)| (Others)
- awesome-react-native - rn-placeholder ★1139 - Display some placeholder stuff before rendering your text or media content in React Native (+ React Native Web!) (Components / UI)
- awesome-reactnative-ui - rn-placeholder - placeholder/master/./book/placeholder.gif)| (Others)
- awesome-react-native - rn-placeholder ★734 - Display some placeholder stuff before rendering your text or media content in React Native (+ React Native Web !) (Components / UI)
- ReactNativeMaterials - rn-placeholder
- awesome-react-cn - rn-placeholder - Display some placeholder stuff before rendering your text or media content in React Native (Uncategorized / Uncategorized)
- awesome-react-native - rn-placeholder ★1139 - Display some placeholder stuff before rendering your text or media content in React Native (+ React Native Web!) (Components / UI)
- awesome-react - rn-placeholder - Display some placeholder stuff before rendering your text or media content in React Native ` 📝 9 months ago` (React Native [🔝](#readme))
- awesome-learning-resources - rn-placeholder - Display some placeholder stuff before rendering your text or media content in React Native (Uncategorized / Uncategorized)
README
**This project is looking for motivated maintainers, see [this issue](https://github.com/mfrachet/rn-placeholder/issues/179) for more information.**
[](https://travis-ci.org/mfrachet/rn-placeholder)
[](https://opensource.org/licenses/MIT)
Display some placeholder stuff before rendering your text or media content in React Native. Compatible with [Expo](https://expo.io/) and [react-native-web](https://github.com/necolas/react-native-web).
- [Snack application **with copy to clipboard!**](https://snack.expo.io/@mfrachet/84bb31)
- [Usage with react-native-web](https://mfrachet.github.io/rn-placeholder)
- [The N Props syndrome (post)](https://mfrachet.github.io/the-n-props-syndrome): explaining the transition between v2 and v3
---
# Usage
## Installation
```javascript
$ yarn add rn-placeholder
```
## In your code
```jsx
import {
Placeholder,
PlaceholderMedia,
PlaceholderLine,
Fade
} from "rn-placeholder";
const App = () => (
);
```
The v3 comes with an example app that provides different stories and example of the library:
- [Stories for elements](./example/storybook/stories/elements.tsx)
- [Stories for animations](./example/storybook/stories/animations.tsx)
- [Stories for customizing elements](./example/storybook/stories/customizeElements.tsx)
- [Stories for customizing animations](./example/storybook/stories/customizeAnimation.tsx)
## Run the example apps
_You can modify any call of `yarn` by `npm install`_
### To start the mobile app:
```sh
$ git clone https://github.com/mfrachet/rn-placeholder
$ cd rn-placeholder
$ yarn
$ cd ./example && yarn && yarn start
```
### To start the web app:
```sh
$ git clone https://github.com/mfrachet/rn-placeholder
$ cd rn-placeholder
$ yarn
$ cd ./example-web && yarn && yarn start
```
The web app is also available in this github pages: https://mfrachet.github.io/rn-placeholder.
## V3 features
- Rewritten in [Typescript](https://www.typescriptlang.org/)
- Less code, more fun 😎
- API [Suspense](https://reactjs.org/docs/code-splitting.html#suspense) oriented
- [New animations](./src/animations)