Comment on page

createComponent

The createComponent() method is the main way to create UI components for your app or integration.
The createComponent() method can take 4 arguments, and must be defined in the blocks object in your app's gitbook-manifest.yaml file.
Any component defined in the blocks object will be available in the GitBook's quick insert menu (⌘ + /)
See the Configurations section for more info.
Argument
Type
Description
componentId*
string
A unique identifier for the component in the integration.
initialState
object
An object containing the initial state of your app or integration when the page loads.
action
function
An async function to handle a dispatched action. See the Actions section to learn more.
render
function
An async function that must return valid UI from ContentKit. See the ContentKit reference for more info. 
*required
Example
const component = createComponent({
    componentId: 'unique-id',
    initialState: (props) => ({
        message: 'Click me',
    }),
    action: async (element, action, context) => {
        switch (action.action) {
            case 'say':
                return { state: { message: 'Hello world' } };
        }
    },
    render: async (element, action, context) => {
        return (
            <block>
                <button label={element.state.message} onPress={{ action: 'say' }} />
            </block>
        );
    },
});

Argument	Type	Description
`componentId`*	`string`	A unique identifier for the component in the integration.
`initialState`	`object`	An object containing the initial state of your app or integration when the page loads.
`action`	`function`	An async function to handle a dispatched action. See the Actions section to learn more.
`render`	`function`	An async function that must return valid UI from ContentKit. See the ContentKit reference for more info.

Last modified 7mo ago