gitbook/docs/api/components.md

Components

Injection

Plugins can inject components by registering React components to some roles.

Register a components

During the initialization phase of your plugin, dispatch the GitBook.registerComponent action:

dispatch(GitBook.registerComponent(MyCustomButton, { role: 'toolbar:buttons:left' }));

Roles

Custom roles can be use for interopability with other plugins, but GitBook and the default theme set a convention for common roles:

Role	Description	Props
page:container	DIV container for the page's content	{ page: Page }
summary:container	DIV container for the whole summary	{ summary: Summary }
summary:parts	DIV container for summary's parts	{ parts: List<SummaryPart> }
summary:part	DIV for a specific part	{ part: SummaryPart }
summary:articles	UL container for a part's articles	{ articles: List<SummaryArticle> }
summary:article	LI for a specific article	{ article: SummaryArticle }

Default Components

GitBook.Head

Extends the meta tags of the page. This is an alias for react-helmet.

<GitBook.Head
    title="My page"
  />

GitBook.ImportCSS

Import a CSS file by resolving the path correctly according to the current page:

<GitBook.ImportCSS href="myfile.css" />

GitBook.ImportJS

Import a JS file by resolving the path correctly according to the current page:

<GitBook.ImportJS src="mylib.js" />

GitBook.InjectedComponent

Inject a component matching a specific role:

<GitBook.InjectedComponent matching={{ role: 'mycustomrole' }} props={{ someProp: 1 }}>
    <b>Inner content</b>
</GitBook.InjectedComponent>

GitBook.InjectedComponentSet

Same API as InjectedComponentSet but render the matching components in chain instead of composed:

<GitBook.InjectedComponentSet matching={{ role: 'mytoolbar' }} />

Warning: Children are discarded.

GitBook.FlexLayout and GitBook.FlexBox

A simple wrapper that provides a Flexbox layout with the given direction and style. Any additional props you set on the Flexbox are rendered.

<GitBook.FlexLayout column>
    <GitBook.FlexBox>First column</GitBook.FlexBox>
    <GitBook.FlexBox>Second column</GitBook.FlexBox>
</GitBook.FlexLayout>