Skip to main content

🏷️ Biblo Bio

Note

The default export must be of the type BibloBio.

This is where you define all the basic information for your component.

Props​

PropertyTypeRequiredDescription
componentReact.ElementType✅The component you want to showcase.
titlestring✅The name or title of your component.
subtitlestring❌A short description that will also be visible in the list of components.
descriptionstring❌A longer description.
tagsstring[]❌An array of tags.
E.g. ["interactive", "button"]
searchTermsstring[]❌An array of strings that the search will match up against.
sectionstring❌The name of the section. This will take precedence over any other logic to find out which section a component belongs in.
props{}❌An object defining a default set of props to apply to your component.
wrapperReact.ElementType❌Sometimes it's helpful to have your component wrapped in another component.
wrapperStyleStyleProp<ViewStyle>❌Sometimes it's helpful to just add some styling to the View (or another component) that your component is being wrapped inside.

Example​

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

export default {
    title: "Separator",
    subtitle: "A line",
    description: "A line separating two different types of content.",
    tags: ["graphics"],
    searchTerms: ["divider", "hr", "horizontal rule"],
    section: "Atoms",
    props: {
        style: "dashed",
    },
    wrapper: MyWrapper,
    wrapperStyle: {
        padding: 10,
    },
} as BibloBio<SeparatorProps>;
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>