Custom Copy Behavior

[danie16arrido]

Is there an example on how to implement callbacks when copying to clipboard. eg: copy a value and then capitalize it?

Thanks,

[mac-s-g]

@danie16arrido - sorry for the delayed reply. An event does not get thrown onCopy, so you would not be able to implement the example you described.

if you wanted to implement this in a fork, you could add an onCopy prop and call it when the clipboard icon is clicked.

that code would need to live in the handleCopy method here: https://github.com/mac-s-g/react-json-view/blob/master/src/js/components/CopyToClipboard.js#L27

does that answer your question?

[danie16arrido]

@mac-s-g thanks for taking time answering my query. it does answer my question and I will give it a go later in the week and report back. Changing of subject how hard will it be to change the copy behaviour in order to copy the value without quotation marks "string" : "this is a test ..." and get this is a test ... instead of "this is a test ..." Will it be the same as capitalizing? thanks,

[mac-s-g]

it's kindof a consistency thing. right now all values are copied as valid JSON values.

so you could paste the result directly into a json parser.

I don't think I'd want to change that outside of incorporating a prop to allow custom copy behaviors.

[rsweetland]

It looks like the enableClipboard prop now supports a callback function 👍

My only request (which seems in line with this ticket) is to pass more information. I am trying to copy the JSON path of the node instead of its JSON contents.

@danie16arrido For your use case it looks like this syntax should work:

        <ReactJsonView
          name={null}
          src={{"name": "value"}}
          enableClipboard={e => console.log(e.source) }
        />

You can then intercept the event (the copied text is available at e.src) and use your own handler to modify it, then copy it again to the clipboard. You have to use your own clipboard handler. For example, here's a function from this SO post

function copyToClipboard(text){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('Hello, World!')

It seems like accessing the JSON path of the current node might be a common need, so maybe it's worth offering that as an option? For now, I could be content with enough data to build the path myself.

Thanks for everyone's work on this excellent component! It is a big part of our product 🙌

[eyalap]

@danie16arrido I needed the same thing, I forked the repository and changed a single line, now copy works without apostrophes for strings and still doing JSON.stringify for objects.

[mac-s-g]

@danie16arrido do you want to post a PR? or do you think the change is specific to your use case?

[rasmusgo]

I would use the copy-without-quotes feature if it was available!

[chaiwa-berian]

It looks like the enableClipboard prop now supports a callback function

My only request (which seems in line with this ticket) is to pass more information. I am trying to copy the JSON path of the node instead of its JSON contents.

@danie16arrido For your use case it looks like this syntax should work:

        <ReactJsonView
          name={null}
          src={{"name": "value"}}
          enableClipboard={e => console.log(e.source) }
        />

You can then intercept the event (the copied text is available at e.src) and use your own handler to modify it, then copy it again to the clipboard. You have to use your own clipboard handler. For example, here's a function from this SO post

function copyToClipboard(text){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('Hello, World!')

It seems like accessing the JSON path of the current node might be a common need, so maybe it's worth offering that as an option? For now, I could be content with enough data to build the path myself.

Thanks for everyone's work on this excellent component! It is a big part of our product

@rsweetland Is accessing the JSON path of the current node implemented? I would be interested to see how this works out. Thanks.

[tianyan89]

copy-without-quotes can be used?

[zffocussss]

you may need to create functions to make it,As I also need this feature.WDYT?

[zffocussss]

it is simple. @tianyan89

 <ReactJsonView
          name={null}
          src={{"name": "value"}}
          enableClipboard={(e) => navigator.clipboard.writeText(e.src) }
  />