0.1.100 • Published 5 months ago

@stackbit/annotations v0.1.100

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Stackbit Annotations

This package includes several utilities to work with Stackbit annotations in React.

Stackbit annotations enable on-page editing experience for your site. Click here to learn more about Stackbit.

Install

npm install @stackbit/annotations

Usage

import * as React from 'react';
import { toObjectId, toFieldPath } from '@stackbit/annotations';

export function MyComponent(props) {
  return (
    <div {...toObjectId(props.id)}>
       <h1 {...toFieldPath('title')}>{props.title}</h1>
       <img src={props.image} {...toFieldPath('image#@src')} />
       {props.link && (
         <a href={props.link.url} {...toFieldPath('link.url#@href', 'link.text')}>
           {props.link.text}
         </a>
       )}
    </div>
  );
}

Output:

<div data-sb-object-id="...">
   <h1 data-sb-field-path="title">...</h1>
   <img src="..." data-sb-field-path="image#@src" />
   <a href="..." data-sb-field-path="link.url#@href link.text">...</a>
</div>

When NODE_ENV is set to production, toObjectIds and toFieldPath will return empty objects, effectively removing any Stackbit annotations.

Utilities

toObjectId

Takes a string and returns an object with that string inside the data-sb-object-id property. When NODE_ENV is set to production, this function returns an empty object.

toObjectId('xyz');
// result: { 'data-sb-object-id': 'xyz' }

toFieldPath

Takes field-path and returns an object with all field-paths concatenated into the data-sb-field-path property. Each field-path can be a string or a FieldPathDescriptor. When NODE_ENV is set to production, this function returns an empty object.

toFieldPath('title', { objectId: 'xyz', fieldPath: 'url', xpath: '@href' });
// result: { 'data-sb-field-path': 'title xyz:url#@href' }

getObjectId

Takes an object and returns the value of the data-sb-object-id property if it exists, otherwise returns undefined.

getObjectId({ 'data-sb-object-id': 'xyz' });
// result: 'xyz'

getFieldPath

Takes an object and returns the value of the data-sb-field-path property if it exists, otherwise returns undefined.

getFieldPath({ 'data-sb-field-path': 'title' });
// result: 'title'

pickDataAttrs

Takes an object and returns a new object with only the properties that start with data-

getFieldPath({
    foo: 'bar',
    bar: 'foo',
    'data-sb-object-id': 'xyz',
    'data-sb-field-path': 'title'
});
// result:
// {
//   'data-sb-object-id': 'xyz',
//   'data-sb-field-path': 'title'
// }
0.1.101-staging.1

5 months ago

0.1.95-staging.1

8 months ago

0.1.96-staging.1

8 months ago

0.1.97-staging.1

7 months ago

0.1.100-staging.1

5 months ago

0.1.98-staging.1

7 months ago

0.1.100

5 months ago

0.1.99-staging.1

7 months ago

0.1.93-staging.1

8 months ago

0.1.96

7 months ago

0.1.97

7 months ago

0.1.98

7 months ago

0.1.99

5 months ago

0.1.92

8 months ago

0.1.93

8 months ago

0.1.94

8 months ago

0.1.95

8 months ago

0.1.94-staging.1

8 months ago

0.1.91

9 months ago

0.1.92-staging.1

9 months ago

0.1.90-staging.1

9 months ago

0.1.90

9 months ago

0.1.89

9 months ago

0.1.91-staging.1

9 months ago

0.1.89-staging.1

9 months ago

0.1.88

9 months ago

0.1.88-staging.1

10 months ago

0.1.86-staging.1

11 months ago

0.1.84-staging.2

12 months ago

0.1.87-staging.1

10 months ago

0.1.85

11 months ago

0.1.86

10 months ago

0.1.87

10 months ago

0.1.80

1 year ago

0.1.81

1 year ago

0.1.82

1 year ago

0.1.83

1 year ago

0.1.84

12 months ago

0.1.79

1 year ago

0.1.85-staging.1

12 months ago

0.1.78

1 year ago

0.1.76

1 year ago

0.1.77

1 year ago

0.1.75

1 year ago

0.1.74

1 year ago

0.1.73

1 year ago

0.1.72

1 year ago

0.1.71

1 year ago

0.1.70

1 year ago

0.1.69

1 year ago

0.1.68

1 year ago

0.1.67

1 year ago

0.1.66

1 year ago

0.1.65

1 year ago

0.1.64

1 year ago

0.1.63

1 year ago

0.1.62

1 year ago

0.1.61

1 year ago

0.1.60

1 year ago

0.1.59

2 years ago

0.1.60-staging.1

2 years ago

0.1.60-develop.1

2 years ago

0.1.61-develop.1

2 years ago

0.1.59-staging.1

2 years ago

0.1.57

2 years ago

0.1.58-staging.1

2 years ago

0.1.59-develop.1

2 years ago

0.1.58-develop.1

2 years ago

0.1.56

2 years ago

0.1.57-staging.1

2 years ago

0.1.55

2 years ago

0.1.56-staging.1

2 years ago

0.1.57-develop.1

2 years ago

0.1.54

2 years ago

0.1.55-staging.1

2 years ago

0.1.56-develop.1

2 years ago

0.1.42-develop.1

2 years ago

0.1.55-develop.1

2 years ago

0.1.50

2 years ago

0.1.51

2 years ago

0.1.49

2 years ago

0.1.42-staging.1

2 years ago

0.1.32-develop.1

2 years ago

0.1.41

2 years ago

0.1.43

2 years ago

0.1.48-staging.1

2 years ago

0.1.44

2 years ago

0.1.47

2 years ago

0.1.38-develop.1

2 years ago

0.1.48

2 years ago

0.1.45-staging.1

2 years ago

0.1.40

2 years ago

0.1.50-develop.1

2 years ago

0.1.35-develop.1

2 years ago

0.1.52-staging.1

2 years ago

0.1.38

2 years ago

0.1.39

2 years ago

0.1.37-staging.1

2 years ago

0.1.50-staging.1

2 years ago

0.1.30

2 years ago

0.1.31

2 years ago

0.1.32

2 years ago

0.1.33

2 years ago

0.1.34

2 years ago

0.1.53-develop.1

2 years ago

0.1.35

2 years ago

0.1.37

2 years ago

0.1.37-develop.1

2 years ago

0.1.30-develop.1

2 years ago

0.1.34-staging.1

2 years ago

0.1.28

2 years ago

0.1.29

2 years ago

0.1.52-develop.1

2 years ago

0.1.51-staging.1

2 years ago

0.1.36-develop.1

2 years ago

0.1.29-develop.1

2 years ago

0.1.35-staging.1

2 years ago

0.1.36-staging.1

2 years ago

0.1.39-develop.1

2 years ago

0.1.51-develop.1

2 years ago

0.1.49-staging.1

2 years ago

0.1.30-staging.2

2 years ago

0.1.29-staging.1

2 years ago

0.1.30-staging.1

2 years ago

0.1.54-develop.1

2 years ago

0.1.49-develop.1

2 years ago

0.1.33-staging.1

2 years ago

0.1.46-develop.1

2 years ago

0.1.41-staging.1

2 years ago

0.1.40-develop.1

2 years ago

0.1.34-develop.1

2 years ago

0.1.31-staging.1

2 years ago

0.1.40-staging.1

2 years ago

0.1.53-staging.1

2 years ago

0.1.38-staging.1

2 years ago

0.1.47-develop.1

2 years ago

0.1.33-develop.1

2 years ago

0.1.32-staging.1

2 years ago

0.1.41-develop.1

2 years ago

0.1.39-staging.1

2 years ago

0.1.46-staging.1

2 years ago

0.1.54-staging.1

2 years ago

0.1.28-staging.1

2 years ago

0.1.27

2 years ago

0.1.26-develop.1

2 years ago

0.1.23-staging.1

2 years ago

0.1.20-develop.1

2 years ago

0.1.23-develop.2

2 years ago

0.1.23-develop.3

2 years ago

0.1.23-develop.1

2 years ago

0.1.22-staging.1

2 years ago

0.1.21-develop.1

2 years ago

0.1.25-staging.1

2 years ago

0.1.24-develop.1

2 years ago

0.1.19-staging.1

2 years ago

0.1.21-staging.1

2 years ago

0.1.20

2 years ago

0.1.21

2 years ago

0.1.22

2 years ago

0.1.25-develop.1

2 years ago

0.1.24-staging.1

2 years ago

0.1.23

2 years ago

0.1.24

2 years ago

0.1.25

2 years ago

0.1.26

2 years ago

0.1.27-staging.1

2 years ago

0.1.22-develop.1

2 years ago

0.1.20-staging.1

2 years ago

0.1.19

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.15-staging.1

2 years ago

0.1.18-develop.1

2 years ago

0.1.15-develop.1

2 years ago

0.1.17-staging.1

2 years ago

0.1.13-develop.0

2 years ago

0.1.19-develop.1

2 years ago

0.1.16-staging.1

2 years ago

0.1.17-develop.1

2 years ago

0.1.13-staging.0

2 years ago

0.1.13-staging.1

2 years ago

0.1.13-staging.2

2 years ago

0.1.16-develop.1

2 years ago

0.1.14-staging.1

2 years ago

0.1.17

2 years ago

0.1.14-develop.2

2 years ago

0.1.14-develop.1

2 years ago

0.1.18-staging.1

2 years ago

0.1.14-develop.0

2 years ago

0.1.13-gitcms.0

2 years ago

0.1.11

2 years ago

0.1.10-alpha.0

2 years ago

0.1.12-alpha.0

2 years ago

0.1.9-alpha.0

3 years ago

0.1.8

3 years ago

0.1.8-alpha.0

3 years ago

0.1.7-alpha.0

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.4-alpha.0

3 years ago

0.1.4

3 years ago

0.1.5

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago