https://github.com/tinalabs/react-tinacms-prompts

https://github.com/tinalabs/react-tinacms-prompts

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tinalabs/react-tinacms-prompts
• Owner: tinalabs
• Created: 2020-08-13T17:22:01.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-31T16:17:11.000Z (about 4 years ago)
• Last Synced: 2024-11-09T00:52:50.774Z (7 days ago)
• Language: TypeScript
• Size: 505 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://tinacms.org)

### Install the package

```bash

yarn add @tinalabs/react-tinacms-prompts

```

### Wrap your app in a provider

```jsx

  

    

  

```

### Prompts plugin interface

```ts

export interface PromptPlugin> {

  __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

```ts

import { useCMS } from 'tinacms'

const cms = useCMS()

const isNewUser = ...

cms.plugins.add>({

  __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](https://tinacms.org/docs/plugins)