@ea-lab/reactive-json-docs/public/rjbuild/docs/core/reaction/setClipboardData.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # Reaction: setClipboardData

      The `setClipboardData` reaction copies a specified value to the user's clipboard.

      ## Properties

  - type: DefinitionList
    content:
      - term:
          code: value
          after: "(any, required)"
        details:
          type: Markdown
          content: "The value to be copied to the clipboard. The value is evaluated, so it can be a literal string or a path to data"

  - type: Markdown
    content: |
      ## Behavior

      - When triggered, the reaction evaluates the `value` property.
      - If the evaluated value is a string, it uses the `navigator.clipboard.writeText()` API to copy it to the clipboard.
      - If the evaluated value is not a string, the reaction does nothing.
      - An error is logged to the console if the clipboard operation fails (e.g., due to browser permissions).

      ## Limitations

      - This reaction relies on the Clipboard API, which requires a secure context (HTTPS) to function in most modern browsers.
      - The user may be prompted for permission to access the clipboard, depending on browser settings.
      - The reaction only supports copying string values. Numbers and other types will be converted to strings, but objects and arrays will not be copied.

  - type: RjBuildDescriber
    title: "Copying text to the clipboard"
    description: "This example shows a button that, when clicked, copies the value of `~.shareable_code` to the clipboard."
    toDescribe:
      renderView:
        - type: div
          content: ["Your code: ", ~.shareable_code]
        - type: button
          content: "Copy Code"
          actions:
            - what: setClipboardData
              on: click
              value: ~.shareable_code
      data:
        shareable_code: "ABC-123-XYZ"