Skip to main content

📂 The Biblo file

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

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

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,

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

Read more here.


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>

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