danoc / react-use-clipboard Goto Github PK
View Code? Open in Web Editor NEWReact hook that provides copy to clipboard functionality.
License: MIT License
React hook that provides copy to clipboard functionality.
License: MIT License
Test suite failed to run
Cannot find module 'react-use-clipboard' from 'x.tsx'
However, Jest was able to find:
'./x.tsx'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'jsx', 'ts', 'tsx', 'json'].
This issue arose in version 0.1.3
0.1.2 had no issue
I assume its to do the the file extension change in 0.1.3 but you may know better.
Should point out to get around I have mocked it but raised this encase anyone else runs into it
When working with nextjs, it is founded that the server returns error as this syntax error pops out
import{useState as t,useEffect as o}from"react";import r from"copy-to-clipboard";export default function(c,e){const[i,n]=t(!1),u=e&&e.successDuration;return o(()=>{if(i&&u){const t=setTimeout(()=>{n(!1)},u);return()=>{clearTimeout(t)}}},[i,u]),[i,()=>{const t=r(c);n(t)}]}
^^^^^^
SyntaxError: Cannot use import statement outside a module
Hello everyone,
I have tested the solution on Firefox but it rejects an error:
Unhandled Rejection (TypeError): 'clipboard-write' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.
Do you have a solution ?
Got this error when I use this as mentioned in the example.
./node_modules/react-use-clipboard/dist/react-use-clipboard.mjs
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
Code
import useClipboard from "react-use-clipboard";
export default function Home() {
const [query, setQuery] = useState('');
const [isCopied, setCopied] = useClipboard("Text to copy");
}
Version
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-use-clipboard": "0.1.2",
nvm
Hi and thanks for the lib! I noticed that types are referring to dist/react-use-clipboard.d.ts
, which doesn't exist in the package.
For example, api like this:
const [isCopied, setCopied] = useClipboard({
successDuration: 1000,
defaultCopyText: 'copied text!'
});
// ...
<>
<span onClick={() => setCopied()}>some text</span> // will be "copied text!"
<span onClick={() => setCopied('new text!')}>some text</span> // will be "new text!"
</>
https://web.dev/publish-modern-javascript/
I tried using exports
but had to remove it in #33 to fix #31. It'd be great to add back since it's smaller than the other bundles. I'm not sure if the issue was in Next.js or microbundle, but it should be easy to find out by testing Next.js with any other package that uses exports
in package.json
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.