Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@figspec/react

pocka3.4mMIT2.0.1TypeScript support: included

React binding for figspec

figma, react

readme

@figspec/react

code style: prettier npm

A React binding for @figspec/components.

Installation

# npm
$ npm i @figspec/react

# Yarn
$ yarn add @figspec/react

# pnpm
$ pnpm add @figspec/react

Usage

See the docs at @figspec/components.

This bindings enables you to use the CustomElement's property via React's component props. You don't need to use kebab-case attributes :camel::dash:

import { FigspecViewer } from "@figspec/react";

const logSelectedNode = (ev) => {
  console.log(ev.detail.selectedNode);
};

<FigspecFrameViewer
  nodes={nodes}
  renderedImage={renderedImage}
  zoomMargin={200}
  onNodeSelect={logSelectedNode}
/>;

changelog

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Unreleased

2.0.1 - 2025-03-11

Added

1.0.4 - 2025-03-11

Added

2.0.0 - 2023-09-06

Changed

  • Upgrade @figspec/components to ^v2.0.1.
  • Upgrade @lit-labs/react to ^v2.0.0.

Removed

  • CommonJS files.

1.0.3 - 2022-10-16

Changed

  • Upgrade @figspec/components from ^v1.0.0 to ^v1.0.1 (context).

1.0.2 - 2022-07-02

Added

1.0.1 - 2022-04-16

Changed

  • Replace custom React glue code with @lit-labs/react (figspec#35).