📂 The Biblo file

Let's say you have a component named Separator. Let's create a Biblo file for it!

TypeScript

Add a file named Separator.biblo.tsx with the following content:

JavaScript

Add a file named Separator.biblo.jsx with the following content:

TypeScript

Separator.biblo.tsx

import { BibloBio, BibloItem } from "@biblo/react-native";
import { Separator, SeparatorProps } from "./Separator.component";

export default {
    title: "Separator",
} as BibloBio<SeparatorProps>;

const Template: BibloItem<SeparatorProps> = (props) => <Separator {...props} />;

export const Horizontal = Template.bind({});

export const Vertical = Template.bind({});
Vertical.props = {
    vertical: true,
};

Note

Unless you enable strictBindCallApply in your tsconfig.json file, you'll have to define types on every named export.

Read more here.

tip

If you can't or don't want to import an interface or type definition for the props of a component, use this instead:

type SeparatorProps = React.ComponentProps<typeof Separator>

JavaScript

Separator.biblo.jsx

import { Separator, SeparatorProps } from "./Separator.component";

export default {
    title: "Separator",
};

const Template = (props) => <Separator {...props} />;

export const Horizontal = Template.bind({});

export const Vertical = Template.bind({});
Vertical.props = {
    vertical: true,
};

That's basically all you need in a Biblo file.