When using React, you can use Stackbit's utility methods to add annotations to your components.

In addition to being a shorthand way of building annotation attributes, these utility methods prevent the data attributes from being rendered when the site is built for production environment (NODE_ENV=production), ensuring your static site data will not grow in size.

There is a utility method for each annotation attribute:

  • objectId
  • fieldPath

objectId()

Syntax

objectId(id)

Parameters

id: String representing the object's ID value. See data-sb-object-id (link) for more information on working with object IDs.

Example

import { objectId } from '@stackbit/annotations'

function Component(props) {
  return <div {...objectId(props.id)}>{/* ... */}</div>
}

fieldPath()

Syntax

fieldPath(path)

fieldPath([objectId, fieldName, xpath])

fieldPath(...paths)

Parameters

path: String representing the path to field in the data source. See data-sb-field-path (link) for more information.

[objectId, fieldName, xpath]: A more declarative way to specify the field path with explicit mention of the object's ID, field name, and xpath within the field. See data-sb-field-path for more information.

...paths: Multiple arguments may be passed and will be separated by a space in the resulting data attribute. e.g. fieldPath('firstName', 'lastName') becomes data-sb-field-path="firstName lastName".

Example

Using the path directly:

import { objectId, fieldPath as fpath } from '@stackbit/annotations'

function Component(props) {
  return (
    <div {...objectId(props.id)}>
      <div {...fpath('author')}>
        <div {...fpath('.first_name')}>{props.post.author.first_name}</div>
      </div>
    </div>
  )
}

Using the more declarative approach:

import { objectId, fieldPath as fpath } from '@stackbit/annotations'

function Component(props) {
  return (
    <div>
      <div>
        <div {...fpath([props.id, 'author', 'first_name'])}>{props.post.author.first_name}</div>
      </div>
    </div>
  )
}