# @tinacms/preview-helpers

> ```ts import client from '../../tina/__generated__/client' import { useTina } from 'tinacms/dist/react' import { editField, useEditEvent, expandQueryWithMetadata } from '@tinacms/preview-helpers'

Latest version **0.0.0-20230419194855** (published 2023-04-19) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @tinacms/preview-helpers
pnpm add @tinacms/preview-helpers
yarn add @tinacms/preview-helpers
bun add @tinacms/preview-helpers
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.0-20230419194855 |
| Published | 2023-04-19 |
| First published | 2023-04-19 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13800 |
| Maintainers | robdmader, kldavis4, spbyrne, jamespohalloran, scottgallant, jeffsee55 |

## Links

- npm: https://www.npmjs.com/package/@tinacms/preview-helpers
- Repository: https://github.com/tinacms/tinacms
- Homepage: https://github.com/tinacms/tinacms#readme
- Issues: https://github.com/tinacms/tinacms/issues
- npm.io page: https://npm.io/package/@tinacms/preview-helpers

## Dependencies (3)

- [zod](https://npm.io/package/zod.md) ^3.14.3
- [graphql](https://npm.io/package/graphql.md) 15.8.0
- [@vercel/stega](https://npm.io/package/@vercel/stega.md) ^0.0.2

## Recent versions

- 0.0.0-20230419194855 (latest) — 2023-04-19
- 0.0.0-20230428231518 (remove-form-nesting) — 2023-04-28
- 0.0.0-20230426235418 — 2023-04-26
- 0.0.0-20230425001052 — 2023-04-25
- 0.0.0-20230420191032 — 2023-04-20
- 0.0.0-20230420182924 — 2023-04-20
- 0.0.0-20230420181854 — 2023-04-20
- 0.0.0-20230419233037 — 2023-04-19
- 0.0.0-20230419230503 — 2023-04-19
- 0.0.0-20230419223808 — 2023-04-19
- 0.0.0-20230419220432 — 2023-04-19

## README

```ts
import client from '../../tina/__generated__/client'
import { useTina } from 'tinacms/dist/react'
import { editField, useEditEvent, expandQueryWithMetadata } from '@tinacms/preview-helpers'

const MyBlogComponent = props => {
  return (<div>
    <h1>{props.title}</h1>
    <img  data-vercel-edit-info={editField(props, 'image')} src={props.image} />
  </div>)
}

export const Page = props => {
  const { data } = useTina(props)
  useEditEvent("/admin")

  return <MyBlogComponent {...data} />
}

export const getStaticProps = async ({ params }) => {
  const variables = { relativePath: `${params.filename}.md` }
  let props = await client.queries.documentation(variables)

  if (process.env.VERCEL_ENV === 'preview') {
    props = await expandQueryWithMetadata(props, client)
  }
  return {
    props: { ...props, variables },
  }
}
```

---
_Source: https://npm.io/package/@tinacms/preview-helpers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._