@posit-dev/shiny-binding-react

This package contains helpers for creating custom input and output bindings using React components. Under the hood it encapsulates the react components in web copmponents and handles the communication between the two.

Want to use plain webcomponents instead of React? See @posit-dev/shiny-binding-main

Installing

npm install @posit-dev/shiny-binding-react

Importing/Using

import { makeReactInput } from "@posit-dev/shiny-binding-react";

Functions

makeReactInput()

Convenience function for creating a custom input binding for a React component. Takes care of registering the input binding to Shiny.

Arguments:

• tagName: The name of the custom element that will be used to render the React component.
• initialValue: The initial value of the input.
• renderComp: A function that setsup the react component.
• priority: Should the value be immediately (immediate) updated wait to the next even loop ( "deferred")? Typically left at the default of "immediate".

Example:

// Generates a new input binding that renders the supplied react component
// into the root of the webcomponent.
makeReactInput({
  tagName: "react-demo",
  initialValue: "#fff",
  renderComp: ({ onNewValue }) => (
    <ColorPickerReact
      initialValue="#fff"
      onNewValue={(color) => onNewValue(color)}
    />
  ),
});

makeReactOutput()

Make a custom Shiny input binding using a react component. Takes care of registering the output binding to Shiny. Encapsulates the React component in a webcomponent internally so the UI generation function just needs to be a return an HTMLTools Tag with the name of the custom element.

Arguments:

• tagName: The name of the custom element that will be used to render the React component.
• renderComp: A function that setsup the react component. Is a function that takes as an argument the payload sent over from the server. This is set by the user and can/should be typed to match the payload sent from the server on the TS side with the generic argument. Ex.

makeReactOutput<{ value: number }>({
  tagName: "testing-output-comp",
  renderComp: ({ value }) => {
    return <div>My value is: {value}</div>;
  },
});

Development

To build the package locally run

npm run build

This runs tsc and generates the production code in the dist folder.

Deploying

To deploy this package to NPM simply run

npm publish

This will auto build the project and publish it to NPM. Make sure to update the version number in package.json before publishing.