0.1.1 • Published 1 year ago
react-native-picturebook v0.1.1
React Native Picturebook is just an alternative to Storybook for React Native. It helps developer build react native components in isolation.
Why bother use it?
- Fucking small. It is less than 30kb.
- Small learning curve. Can master it under 10 minutes.
- No magic. It is just a react native component.
- Support Typescript
Examples
Hello World
import {
PictureBook,
PictureBookPreview
} from "react-native-picturebook";
const book = new PictureBook([
{
name: "Button",
body: () => (<Button>Submit</Button>)
}
]),
function App() {
return (
<SafeAreaView style={{ flex: 1 }}>
<PictureBookPreview book={book} />
</SafeAreaView>
)
}
Multiple page and sub page
import {
PictureBook,
PictureBookPreview
} from "react-native-picturebook";
function ButtonPageBody() {
return <Button>Submit</Button>;
}
function ButtonWithDropdownPageBody() {
return <Button>Submit</Button>;
}
function TogglePageBody() {
return <Toggle />
}
const book = new PictureBook([
{
name: "Button",
body: ButtonPageBody
// This is sub-page
pages: [
{
name: "Button with dropdown",
body: ButtonWithDropdownPageBody
}
]
},
{
name: "Toggle",
body: TogglePageBody
}
]),
function App() {
return (
<SafeAreaView style={{ flex: 1 }}>
<PictureBookPreview book={book} />
</SafeAreaView>
)
}
Add some controls
import {
PictureBook,
PictureBookPreview,
textControl,
choiceControl,
} from "react-native-picturebook";
function ButtonBodyPage({ text, mode }) {
return <Button mode={mode}>{text}</Button>
}
const book = new PictureBook([
{
name: "Button",
body: ButtonBodyPage,
controls: [
textControl({
name: "text",
defaultValue: "Submit"
}),
choiceControl({
name: "mode",
defaultValue: "outline",
options: [ "outline", "solid"],
}),
]
}
]),
function App() {
return (
<SafeAreaView style={{ flex: 1 }}>
<PictureBookPreview book={book} />
</SafeAreaView>
)
}