@stackbit/annotations

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

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

  • 1
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

  • 1
  • 2
  • 3
  • 4
  • 5
import { objectId } from '@stackbit/annotations'

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

fieldPath()

Syntax

  • 1
  • 2
  • 3
  • 4
  • 5
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:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
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:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
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>
  )
}