How to use the tinacms.useCMS function in tinacms

To help you get started, we’ve selected a few tinacms examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github celo-org / celo-monorepo / packages / web / src / brandkit / Tina.tsx View on Github external
export default function ExamplePage(props) {
  // grab the instance of the CMS to access the registered git API
  const cms = useCMS()

  // add a form to the CMS; store form data in `post`
  const [post, form] = useLocalForm({
    id: props.fileRelativePath,
    label: 'Edit Post', // needs to be unique
    // starting values for the post object
    initialValues: { title: props.title, headline: props.headline, markdown: props.markdown },
    // field definition
    fields: [
      { name: 'title', label: 'Title', component: 'text' },
      { name: 'headline', label: 'Headline', component: 'textarea' },
      {
        name: 'markdown',
        component: 'markdown',
        label: 'Post Body',
        description: 'Edit the body of the post here',
github tinacms / tinacms / packages / gatsby-tinacms-remark / src / useRemarkForm.tsx View on Github external
formOverrrides: Partial> = {}
): [RemarkNode | null | undefined, Form | null | undefined] {
  /**
   * We're returning early here which means all the hooks called by this hook
   * violate the rules of hooks. In the case of the check for
   * `NODE_ENV === 'production'` this should be a non-issue because NODE_ENV
   * will never change at runtime.
   */
  if (!markdownRemark || process.env.NODE_ENV === 'production') {
    return [markdownRemark, null]
  }

  validateMarkdownRemark(markdownRemark)

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const cms = useCMS()
  const label = formOverrrides.label || markdownRemark.frontmatter.title
  const id = markdownRemark.fileRelativePath
  const actions = formOverrrides.actions

  /**
   * The state of the RemarkForm, generated from the contents of the
   * Markdown file currently on disk. This state will contain any
   * un-committed changes in the Markdown file.
   */
  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const valuesOnDisk = useMemo(
    () => ({
      fileRelativePath: markdownRemark.fileRelativePath,
      frontmatter: markdownRemark.frontmatter,
      rawMarkdownBody: markdownRemark.rawMarkdownBody,
      rawFrontmatter: JSON.parse(markdownRemark.rawFrontmatter),