diff --git a/.eslintrc.js b/.eslintrc.js
index 87469c5..4eb8573 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,7 +14,7 @@ module.exports = {
},
sourceType: 'module'
},
- plugins: ['react', 'import', 'jsx-a11y'],
+ plugins: ['react', 'import', 'jsx-a11y', 'react-hooks'],
rules: {
'react/prop-types': 'off',
'react/display-name': 'off',
@@ -22,7 +22,8 @@ module.exports = {
'react/jsx-uses-vars': 'error',
'import/no-unresolved': 'error',
'no-duplicate-imports': 'error',
- 'jsx-a11y/click-events-have-key-events': 'off'
+ 'jsx-a11y/click-events-have-key-events': 'off',
+ 'react-hooks/rules-of-hooks': 'error'
},
settings: {
react: {
diff --git a/components/CopyButton.js b/components/CopyButton.js
deleted file mode 100644
index a2960f5..0000000
--- a/components/CopyButton.js
+++ /dev/null
@@ -1,36 +0,0 @@
-// TODO publish rucksack and import from there
-
-import React from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
-
-class CopyButton extends React.Component {
- constructor(props) {
- super(props)
-
- this.state = {
- copied: false
- }
- this.onCopy = this.onCopy.bind(this)
- }
-
- onCopy() {
- this.setState({ copied: true })
- const component = this
- setTimeout(
- () => component.setState({ copied: false }),
- this.props.interval == null ? 1000 : this.props.interval
- )
- }
-
- render() {
- return (
-
- {this.props.children({
- copied: this.state.copied
- })}
-
- )
- }
-}
-
-export default CopyButton
diff --git a/components/ExportMenu.js b/components/ExportMenu.js
index 45397d2..bfc9a36 100644
--- a/components/ExportMenu.js
+++ b/components/ExportMenu.js
@@ -1,10 +1,10 @@
import React from 'react'
import { withRouter } from 'next/router'
+import { useCopyTextHandler } from '@dawnlabs/tacklebox'
import { COLORS, EXPORT_SIZES } from '../lib/constants'
import Button from './Button'
import Input from './Input'
-import CopyButton from './CopyButton'
import Popout, { managePopout } from './Popout'
const toIFrame = url =>
@@ -17,15 +17,15 @@ const toIFrame = url =>
const CopyEmbed = withRouter(
React.memo(
- ({ router: { asPath } }) => (
-
- {({ copied }) => (
-
- )}
-
- ),
+ ({ router: { asPath } }) => {
+ const { onClick, copied } = useCopyTextHandler(toIFrame(asPath))
+
+ return (
+
+ )
+ },
(prevProps, nextProps) => prevProps.router.asPath === nextProps.router.asPath
)
)
diff --git a/components/WindowControls.js b/components/WindowControls.js
index 2942473..927890a 100644
--- a/components/WindowControls.js
+++ b/components/WindowControls.js
@@ -1,6 +1,6 @@
import React from 'react'
+import { useCopyTextHandler } from '@dawnlabs/tacklebox'
-import CopyButton from './CopyButton'
import { COLORS } from '../lib/constants'
import { Controls, ControlsBW } from './svg/Controls'
import CopySVG from './svg/Copy'
@@ -8,9 +8,11 @@ import CheckMark from './svg/Checkmark'
const size = 24
-function renderCopyButton({ copied }) {
+const CopyButton = React.memo(function CopyButton({ text }) {
+ const { onClick, copied } = useCopyTextHandler(text)
+
return (
-