@tinalabs/react-tinacms-prompts

react-tinacms-prompts

This package allows one to add prompts to pop to when the cms is enabled (edit mode) amd a condition is met.

Getting started

NOTE: this is a plugin for tinacms and assumes that you are familiar with tinacms. If you are not check it out

Install the package

yarn add @tinalabs/react-tinacms-prompts

Wrap your app in a provider

<TinaProvider cms={this.cms}>
  <PromptProvider>
    <App {...props} />
  </PromptProvider>
</TinaProvider>

Prompts plugin interface

export interface PromptPlugin<ComponentProps = Record<string, any>> {
  __type: 'prompt'
  name: string
  Component(props: ComponentProps): React.ReactElement
  condition: boolean
  props?: ComponentProps
}

key	usage
__type	always prompt
name	the name or id you want to give to your prompt
Component	The react component that is rendered when the condition is true
condition	if this condition is true the Component will be rendered
props	the props that are passed to the component

Registering the plugin in your app

import { useCMS } from 'tinacms'

const cms = useCMS()
const isNewUser = ...

cms.plugins.add<PromptPlugin<MyProps>>({
  __type: 'prompt',
  Component: MyComponent,
  name: 'hello-prompt',
  condition: isNewUser,
  props: {},
})

Now when isNewUser is true and the cms is enabled a MyComponent will be registered

Note: this is only one way to register a plugin check out the tinacms docs for the full list