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: 13 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 (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T13:18:17.000Z (about 2 years ago)
• Last Synced: 2025-04-09T16:47:55.896Z (14 days ago)
• Topics: placeholder, react, react-native, ux
• Language: TypeScript
• Homepage: https://mfrachet.github.io/rn-placeholder/
• Size: 13.3 MB
• Stars: 2,132
• 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.**

[![Build Status](https://travis-ci.org/mfrachet/rn-placeholder.svg?branch=master)](https://travis-ci.org/mfrachet/rn-placeholder)

[![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. 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

---

![Image of the placeholder in action](./assets/placeholder.gif)

# 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)