@sergiodxa/clipboard

Write, read and observe text to and from clipboard in a declarative way.

Usage

Install it

yarn add @sergiodxa/clipboard

Import it

import { Clipboard } from "@sergiodxa/clipboard";

Render it

export default () => (
  <div>
    <h1>Hello, World!</h1>
    <Clipboard write="Hello, World!" observe="1s">
      {{ value, reading, support} => {
        if (support) {
          return <em>No support for `navigator.clipboard`</em>
        }
        if (reading) {
          return <em>Reading value from clipboard</em>
        }
        return <strong>From clipboard: {value}</strong>
      }}
    </Clipboard>
  </div>
)

If write is defined the component will write the value to the user clipboard. If this prop changes the component will write the new value to the clipboard.

If children is defined as a function it will read the current value of the clipboard and pass it to the children with the format { value, reading }. If there is no support it will return { support: false }.

If observe is defined it will read the clipboard on intervals, the value could be a string (supporting ms to parse strings) or a number in milisecods. If the value is zero or the prop is not defined it will not run the interval.