plugins/remark-snackplayer/README.md
This plugin parses codeblocks with language set as SnackPlayer and replaces them with embedded Expo's SnackPlayers, you can also provide parameters along with the codeblock to set some basic details.
```SnackPlayer name=Hello%20World description=This%20is%20a%20description
import React from 'react';
import { Text, View } from 'react-native';
const YourApp = () => {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Try editing me! 🎉</Text>
</View>
);
}
export default YourApp;
```
The above code snippet would look like this:
| Name | Description | Default |
|---|---|---|
| name | SnackPlayer name | "Example" |
| description | Description of the example | "Example usage" |
| dependencies | Additional dependencies, eg. "expo-constant" | "" |
| platform | Example platform | "web" |
| supportedPlatforms | Supported platforms | "ios,android,web" |
| theme | SnackPlayer theme, "light" or "dark" | "light" |
| preview | Preview visible, "true" or "false" | "true" |
| deviceAppearance | Sets the preview mobile device appearance, "light" or "dark" | "light" |
| loading | iFrame loading attribute, "auto", "lazy" or "eager" | "lazy" |
| deviceAndroid | Emulator type used for Android, see Appetize options | pixel4 |
| deviceIos | Simulator type used for iOS, see Appetize options | iphone12 |
To style the Snack Player wrapper you can use .snack-player class.