Clipboard

import { SlClipboard } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <p>Clicking the clipboard button will put "shoelace rocks" into your clipboard</p>
    <SlClipboard value="shoelace rocks"></SlClipboard>
  </>
);

      

      
    

import { SlClipboard } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlClipboard value="shoelace rocks">
      <button type="button">Copy to clipboard</button>
      <div slot="copied">copied</div>
      <button slot="error">Error</button>
    </SlClipboard>
    <SlClipboard value="shoelace rocks">
      <sl-button>Copy</sl-button>
      <sl-button slot="copied">Copied</sl-button>
      <sl-button slot="error">Error</sl-button>
    </SlClipboard>
  </>
);

      

      
    

import { SlClipboard } from '@shoelace-style/shoelace/dist/react';

const css = `
  dl, .row {
    display: flex;
    margin: 0;
  }
`;

const App = () => (
  <>
    <div class="row">
      <dl>
        <dt>Phone Number</dt>
        <dd id="phone-value">+1 234 456789</dd>
      </dl>
      <SlClipboard for="phone-value"></SlClipboard>
    </div>

    <style>{css}</style>
  </>
);

      

      
    

import { SlClipboard } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <input type="text" value="input rocks" id="input-rocks">
    <SlClipboard for="input-rocks"></SlClipboard>
    <br>
    <textarea id="textarea-rocks">textarea
rocks</textarea>
    <SlClipboard for="textarea-rocks"></SlClipboard>
    <br>
    <a href="https://shoelace.style/" id="link-rocks">Shoelace</a>
    <SlClipboard for="input-rocks"></SlClipboard>
  </>
);

      

      
    

import { SlClipboard } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlClipboard for="not-found"></SlClipboard>
    <SlClipboard for="not-found">
      <sl-button>Copy</sl-button>
      <sl-button slot="copied">Copied</sl-button>
      <sl-button slot="error">Error</sl-button>
    </SlClipboard>
  </>
);

      

      
    

import { SlClipboard } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlClipboard value="shoelace rocks" reset-timeout="500"></SlClipboard>
  </>
);

      

      
    

import { SlClipboard } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <sl-copy-demo-el></sl-copy-demo-el>
  </>
);

customElements.define('sl-copy-demo-el', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <p id="copy-me">copy me (inside shadow root)</p>
      <sl-clipboard for="copy-me"></sl-clipboard>
    `;
  }
});