@blocklet/embed

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.

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

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

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

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>
  )
}