# @blocklet/embed

> Blocklet OpenEmbed toolkit

Latest version **0.3.5** (published 2025-12-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install @blocklet/embed
pnpm add @blocklet/embed
yarn add @blocklet/embed
bun add @blocklet/embed
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.5 |
| Published | 2025-12-15 |
| First published | 2023-04-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 118 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | blocklet |
| Maintainers | wangshijun, gxw |
| Keywords | blocklet, embed |

## Links

- npm: https://www.npmjs.com/package/@blocklet/embed
- npm.io page: https://npm.io/package/@blocklet/embed

## Dependencies (11)

- [ufo](https://npm.io/package/ufo.md) ^1.5.4
- [zod](https://npm.io/package/zod.md) ^3.23.8
- [axios](https://npm.io/package/axios.md) ^1.7.3
- [ahooks](https://npm.io/package/ahooks.md) ^3.8.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@mui/lab](https://npm.io/package/@mui/lab.md) 7.0.1-beta.18
- [@iconify/react](https://npm.io/package/@iconify/react.md) ^5.0.2
- [broadcast-channel](https://npm.io/package/broadcast-channel.md) ^5.5.1
- [overlayscrollbars](https://npm.io/package/overlayscrollbars.md) ^2.10.0
- [overlayscrollbars-react](https://npm.io/package/overlayscrollbars-react.md) ^0.5.6
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 0.3.5 (latest) — 2025-12-15
- 0.3.4 — 2025-11-29
- 0.3.3 — 2025-11-14
- 0.3.2 — 2025-11-06
- 0.3.1 — 2025-11-05
- 0.3.0 — 2025-10-31
- 0.2.5 — 2025-05-30
- 0.2.4 — 2025-04-17
- 0.2.3 — 2025-01-24
- 0.2.2 — 2025-01-09
- 0.2.1 — 2025-01-03
- 0.2.0 — 2024-08-16
- 0.1.11 — 2024-02-23
- 0.1.10 — 2024-02-22
- 0.1.9 — 2024-02-22
- … 13 more at https://npm.io/package/@blocklet/embed/versions

## README

# Blocklet OpenEmbed Toolkit

Blocklet OpenEmbed toolkit for blocklet development

## Development 

### Instal dependencies

```
pnpm i
```

### Build packages
```
pnpm build
```

### Build & watch
```
pnpm build:watch
```


## Use in your blocklet

### EmbedProvider
Add `EmbedProvider` to your blocklet root component, and pass the `injectImports` prop to inject the dependencies that your blocklet needs.

```tsx
import React from 'react';
import { EmbedProvider } from '@blocklet/embed/embed-react';
import * as localeModule from '@arcblock/ux/lib/Locale/context';
import * as sessionModule from '@arcblock/did-connect-react/lib/Session';

const App = () => {
  return (
    <EmbedProvider
      injectImports={{
        react: React,
        '@arcblock/ux/lib/Locale/context': localeModule,
        '@arcblock/did-connect-react/lib/Session': sessionModule,
        '@mui/material': muiModule,
      }}>
      <Main />
    </EmbedProvider>
  )
}
```

### useEmbedContext
Use `useEmbedContext` to get the blocklet context

```tsx
import React from 'react';
import { useEmbedContext } from '@blocklet/embed/embed-react';

const Main = () => {
  const { embedList, initialized, loading } = useEmbedContext();
  return (
    <div>
      <h1>Blocklet Context</h1>
      <p>Loading: {loading}</p>
      <p>Initialized: {initialized}</p>
      <p>EmbedList: </p>
      <pre>{JSON.stringify(embedList, null, 2)}</pre>
    </div>
  )
}
```

### EmbedButton
Use `EmbedButton` to trigger the blocklet embed dialog

```tsx
import React from 'react';
import { EmbedButton } from '@blocklet/embed/embed-react';
import Toast from '@arcblock/ux/lib/Toast';

const Main = () => {
  const getInput = () => {
    const input = 'Hello Blocklet!'; // get some input test in EmbedButton context
    return input;
  };

  const handleError = (error) => {
    console.log('error', error.message);
    Toast.error(error.message); // show error message
  };

  return (
    <div>
      <h1>Blocklet EmbedButton</h1>
      <EmbedButton
        size="small"
        getInput={getInput}
        onError={handleError}
        variant="outlined"/>
    </div>
  )
}
```

### EmbedView
Use `EmbedView` to render the blocklet content

```tsx
import React from 'react';
import { EmbedView } from '@blocklet/embed/embed-react';

const Main = () => {
  const embedId = 'blockletId'; // the blocklet id you want to embed
  return (
    <div>
      <h1>Blocklet EmbedView</h1>
      <EmbedView id={embedId} />
    </div>
  )
}
```

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