I'm trying to use an npm package called hover-effect inside a functional component, but I'm constantly bumping into some issues. I have used similar packages in create-react-app before but I'm new to next.js. See below how the package should be used:
import React, { useEffect, useRef } from "react";
import HoverEffect from "hover-effect";
export default Card(){
const container = useRef();
useEffect(() => {
console.log(container.current);
new HoverEffect({
parent: container.current,
intensity: 0.3,
image1: "https://picsum.photos/420/620",
image2: "https://picsum.photos/420/620",
displacementImage:
"https://raw.githubusercontent.com/robin-dela/hover-effect/master/images/fluid.jpg",
});
}, [container]);
return(
<>
<div
className="outer-image"
ref={container}
id="imgContainer"
style={{ height: 500, width: 400 }}
>
</div>
</>
)
First of all, I tried to import it like any other npm module, but I get the issue
SyntaxError: Cannot use import statement outside a module
I have tried to import the package dynamically using next/dynamic in this way:
const HoverEffect = dynamic(() => import('hover-effect')), {ssr: false});
But when I try to use 'new' syntax I get the error 'HoverEffect' is not a constructor.
I even tried adding next js transpile module as
next.config.js:
const withTM = require("next-transpile-modules")([
"gsap",
"hover-effect",
]);
module.exports = withTM();
Anyone aware of any solution would be a lifesaver
I just tried to import it in my localhost. This solution is working fine
const withTM = require("next-transpile-modules")([
"gsap",
"hover-effect",
]);
module.exports = withTM();
You also need to make sure that your import is like this
import HoverEffect from "hover-effect";
Related
I am trying to implement animejs in my react projects. But unable to run my first code. I already installed my animejs package. It would be great if you would help me learn this and guide me on how to do it. Here is the code, help me to resolve the error.
import {useEffect} from 'react'
import anime from 'animejs/lib/anime.es.js';
// import { easings } from 'animejs';
export default function Homeanime() {
const fontSize = {
fontSize:'40px'
}
useEffect(() => {
const basicTimeline = anime.timeline({autoplay:true})
basicTimeline
.add({
target:'.check',
translateX: 250
})
},[])
return (
<>
<h1 className='p-5 check' style={fontSize}>Working</h1>
</>
)
}
I am trying to implement a function into my app, so the User can sign PDFs. I found on CodeSandbox an example for a Signature Pad and i tried to insert it into my project but i get 2 errors called:
Property 'getTrimmedCanvas' does not exist on type '{}'.ts(2339)
Property 'clear' does not exist on type '{}'.ts(2339)
Codesource Signature Pad example
Codepart with the Errors
import Popup from "reactjs-popup";
import SignaturePad from "react-signature-canvas";
import { useState, useRef } from "react";
import React from "react";
function Button() {
const sigCanvas = useRef({});
const [imageURL, setImageURL] = useState(null);
const clear = () => sigCanvas.current.clear();
const save = () =>setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"));
return (
//for more Code use the Link: Codesource Signature Pad example
);
}
export default Button;
I have installed this two libraries:
npm install --save reactjs-popup
npm install --save react-signature-canvas
Any idea how to fix them?
Thanks in adance
I resolve this problem add a type in the useRef:
const sigCanvas = useRef<any>();
Very simple you are using .tsx file which is causing the issue. Just change the file type from tsx to .js or .jsx it will work fine :)
I've just used react-signature-canvas and this works for me
On package.json
"#types/react-signature-canvas": "^1.0.2",
"react-signature-canvas": "^1.0.6",
On component
import React, { useRef } from 'react';
import SignatureCanvas from 'react-signature-canvas';
const signaturePadRef: React.MutableRefObject<SignatureCanvas> = useRef(null);
return (
<SignatureCanvas
ref={(ref) => {
signaturePadRef.current = ref;
}}
/>
);
I need such an editor on react https://cloverhearts.github.io/quilljs-markdown/ , as you can see in it you can put markdown characters directly into the text.
when I do this
import React, { Component } from 'react'
import './App.css'
import ReactQuill from 'react-quill'
import Quill from 'quill'
import QuillMarkdown from 'quilljs-markdown'
const App = () => {
const editor = new Quill('#editor', {
theme: 'snow'
})
new QuillMarkdown(editor)
return (
<div className='app'>
{/*<MyComponent/>*/}
<div id="editor"></div>
</div>
)
}
export default App
I get error TypeError: Cannot read property 'on' of undefined
as I understand I need jQuery for work, but I use react, I found https://www.npmjs.com/package/react-quill this quilljs for react, but I don't know how to combine it with markdown https://www.npmjs.com/package/quilljs-markdown
can anyone help?
I found the solution for this after hours of trying this out.
What you have to do is this:
Create a module for ReactQuill
Register the module.
Pass modules to react quill
Shown Below.
Step 01
const modules = {
markdownOptions: {}
};
Step 02
Quill.register('modules/markdownOptions', QuillMarkdown);
Step 03
<ReactQuill
modules={modules}
/>
It seems like you are trying to initialize the Quill instance and the markdown module before the editor is ready.
Use useEffect hook to initialize it after the div has been rendered:
import {useEffect} from 'react';
...
useEffect(() => {
const editor = new Quill('#editor', {
theme: 'snow'
});
new QuillMarkdown(editor);
});
I'm trying the new state management library from facebook recoil, I tried the Getting started example on a reactjs project and it worked perfectly. After that I tried recoil on a react-native project but I got an error:
Here's the code I've tried:
App.js
import React from 'react';
import {RecoilRoot} from 'recoil';
import RecoilTest from './RecoilTest';
const App = () => {
return (
<RecoilRoot>
<RecoilTest />
</RecoilRoot>
);
};
export default App;
RecoilTest.js
import React from 'react';
import {useRecoilState} from 'recoil';
import {View, Text} from 'react-native';
import {textState} from './Atoms';
const RecoilTest = () => {
const [text, setText] = useRecoilState(textState);
return (
<View>
<Text>{text}</Text>
</View>
);
};
export default RecoilTest;
Atoms.js
import {atom} from 'recoil';
export const textState = atom({
key: 'textState',
default: 'initial value',
});
Recoil don't has a fully support to react native yet
Towards release
See here
Hi everyone! FYI we've published a "nightly build" branch for testing purposes. If you want to try out recoil with react native before we release next version, try install the nightly branch with the "install git branch" feature of npm/yarn:
npm install https://github.com/facebookexperimental/Recoil.git#nightly
Or
yarn add https://github.com/facebookexperimental/Recoil.git#nightly
It is supported in nightly build. If you want to try before it is released with next version, you can install it doing:
yarn add https://github.com/facebookexperimental/Recoil.git#nightly
The update can be followed in this PR
Update:
RN support is now there in Recoil.js as Experimental.
https://github.com/facebookexperimental/Recoil/releases/tag/0.1.1
Try using 'useRecoilValue' instead in your RecoilTest.js file
const [text, setText] = useRecoilValue(textState);
I'm trying to use flatpickr("^4.6.3)" in a react project that uses webpack as the module bundler. I get this error in this code:
import React, { useRef, useCallback } from 'react';
import flatpickr from 'flatpickr';
import 'flatpickr/dist/themes/light.css';
function MyComponent() {
const flatpickerIn = useRef(null);
const flatpickrOptions = {
enableTime: true,
allowInput: true,
dateFormat: "Y-m-d h:i K"
// noCalendar: true,
};
const inputRefcallback = useCallback(node => {
if (node !== null && !flatpickerIn.current) {
flatpickerIn.current = flatpickr(node, flatpickrOptions);
}
}, [flatpickrOptions]);
return (
<input
name="startDate"
placeholder="YYYY/MM/DD"
style={{ width: 'auto' }}
ref={startDateRef}
/>
)
}
TypeError: flatpickr__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function
One strange fact is that this code works when rendering the component in storybook. Any ideas to fix this?
It seems like the problem was with the uglify plugin I am using. The error disappeared after I imported flatpickr like so:
import flatpickr from 'flatpickr/dist/flatpickr.min';