Redux Clipboard Copy

Demo

Clipboard copy middleware for Redux using document.execCommand.

document.execCommand is not yet supported in all browsers, you may need some sort of polifyll or a different lib may work for you.

npm install redux-clipboard-copy --save 
yarn add redux-clipboard-copy --save

Note

If you use it in CommonJS environment, don’t forget to add .default to your import

var reduxClipboardCopy = require('redux-clipboard-copy').default

If you used ES modules, you’re already all good:

import reduxClipboardCopy from 'redux-clipboard-copy';

We also support a UMD build:

var reduxClipboardCopy = window.reduxClipboardCopy.default

It also requires .default at the end.

Setup

You need to add into your store enhancers

import { createStore, applyMiddleware } from 'redux';
import reduxClipboardCopy from 'redux-clipboard-copy';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(reduxClipboardCopy)
);

With this setup you can just dispatch copy action as:

import { copy } from 'redux-clipboard-copy';

const value = 'value to be copied!';

dispatch(
  copy({
    payload: { value }
  })
)

API

copy

import { copy } from 'redux-clipboard-copy';

// ...
dispatch(
  copy({
    payload: {
      value: 'to be copied'
    }
  })
);

failed

Triggered once document.execCommand fails.

import { failed } from 'redux-clipboard-copy';

// ...
dispatch(failed());

success

Triggered once document.execCommand succeed.

import { success } from 'redux-clipboard-copy';

// ...
dispatch(success());

COPY

Action type to handle copy start into reducers

import { COPY } from 'redux-clipboard-copy';

// ...

function reducer(state = {}, action) {
  switch(action.type) {
    case COPY:
      // do something once copy starts
      return state;

    default:
      return state;
  }
}

SUCCESS

Action type to handle copy success into reducers

import { SUCCESS } from 'redux-clipboard-copy';

// ...

function reducer(state = {}, action) {
  switch(action.type) {
    case SUCCESS:
      // do something once copy succeeded.
      return state;

    default:
      return state;
  }
}

FAILED

Action type to handle copy failure into reducers

import { FAILED } from 'redux-clipboard-copy';

// ...

function reducer(state = {}, action) {
  switch(action.type) {
    case FAILED:
      // do something once copy fails
      return state;

    default:
      return state;
  }
}

License

MIT