Display some placeholder stuff before rendering your text or media content in React Native. Compatible with Expo and react-native-web.
- Snack application with copy to clipboard!
- Usage with react-native-web
- The N Props syndrome (post): explaining the transition between v2 and v3
Usage
Installation
$ yarn add rn-placeholder
In your code
import {
Placeholder,
PlaceholderMedia,
PlaceholderLine,
Fade
} from "rn-placeholder";
const App = () => (
<Placeholder
Animation={Fade}
Left={PlaceholderMedia}
Right={PlaceholderMedia}
>
<PlaceholderLine width={80} />
<PlaceholderLine />
<PlaceholderLine width={30} />
</Placeholder>
);
The v3 comes with an example app that provides different stories and example of the library:
- Stories for elements
- Stories for animations
- Stories for customizing elements
- Stories for customizing animations
Run the example apps
You can modify any call of yarn by npm install
To start the mobile app:
$ git clone https://github.com/mfrachet/rn-placeholder
$ cd rn-placeholder
$ yarn
$ cd ./example && yarn && yarn start
To start the web app:
$ 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.com/rn-placeholder.
V3 features
- Rewritten in Typescript
- Less code, more fun
😎 - API Suspense oriented
- New animations
5 Feb 8, 2022
75 Sep 21, 2022
1.1k Jan 8, 2023
1.6k Dec 30, 2022
55 Sep 2, 2022
24 Oct 30, 2022
53 Oct 31, 2022
1.4k Jan 4, 2023
208 Oct 31, 2022
29 Feb 24, 2021
7.9k Jan 5, 2023
3 May 13, 2022
194 Dec 29, 2022
11 Feb 8, 2022
718 Oct 8, 2022
68 Aug 9, 2021
34 Dec 13, 2022
12 Jul 1, 2022
1 Apr 18, 2022