etesam913 / react-magic-motion Goto Github PK

import Card from './Card';
import PropTypes from 'prop-types';
import { MagicMotion } from "react-magic-motion";

const Results = ({ data }) => {
    return (
        <MagicMotion>
            <div className="results-grid">
                {data.map((item, index) => (
                    <div key={index} className="result-item">
                        {/* {JSON.stringify(item)} */}
                        <Card data={item} />
                    </div>
                ))}
            </div>
        </MagicMotion>
    );
};

Results.propTypes = {
    data: PropTypes.array.isRequired
};

export default Results;

So adding the items like this, it's making the results not appear, completely black website.
https://streamable.com/8l1yfx

hi, thanks for writing this reactjs library. im quite excited to use it but the examples on https://www.react-magic-motion.com/applications do not work for me even when i made sure the the animations button on the screen is turned on
ive seen how the todo list animation should work in the demo video so i can say for sure it is not working on my side on different browsers
ive also tried it in incognito so that extensions are disabled and it doesnt work too
there are no msgs in the console
what could be the problem here...?

✨ Overview

• this error occurs when is a child of <MagicMotion> in v1.1.2

Here is a codesandbox with the error:
https://codesandbox.io/p/sandbox/react-magic-motion-sidebar-test-56rjpd?file=%2Fsrc%2FApp.tsx%3A2%2C34

I dont know why but the only animations that work for my computer are the Non Layout Animations, i have tried firefox, opera, edge and none of them worked form me. Then i tried to visit the website from my phone, and all the animations worked perfectly. I dont know what could be happening and im going psyco xd.

I can't figure out this.

• It would say something like, "Alert: Animations won't play for you because you have use-reduced-motion enabled. To disable this, follow the steps here"
• This would help users understand that the library is not broken and that they have to change a setting if they want to see the animations play.
• The alert should be dismissible so it does not stay forever.

• It should have the same config as the testing libraries in the react-magic-motion package
  • vitest and react-testing-library
• It should basically just test if all the examples present on the docs page render correctly.

Hey! I have an app where I installed react-magic-motion, but am coming across this error and can't get it to work.

My app is built with:

• React
• NextJS (pages)
• TailwindCSS

I installed the package with bun a react-magic-motion, then wrapped the contents in my main page in <MagicMotion>, imported with import { MagicMotion } from "react-magic-motion";. I immediately get the following error:

index.js:654 Uncaught Error: Invalid tag: [object Object]
    at startChunkForTag ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:2804:13)
    at pushStartGenericElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:2630:15)
    at pushStartInstance ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:2908:18)
    at renderHostElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5636:18)
    at renderElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderContextProvider ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
    at renderElement ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive ({MY_APP}/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
websocket.js:50 [HMR] connected

Some potentially notable package versions I'm running:

    "next": "^13.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-magic-motion": "^1.0.7",

For accessibility purposes, skip/cancel all animations when a user has a reduce preference set for prefers-reduced-motion.

Reference https://www.w3.org/WAI/WCAG22/Techniques/css/C39.html

✨ Overview

• There needs to be testing for the <MagicMotion /> , <MagicExclude /> and <MagicTabSelect /> components
• The tests should run in CI using GitHub actions
• Make sure the test files are excluded from the package build

Some things to test

• <MagicMotion> returns a simple div with text
  • It should convert the div to a motion.div and have layout="true"
• <MagicMotion> returns a custom component imported from another file
  • The custom component should return a simple div with text
• <MagicMotion> returns a custom component imported from another file
  • The custom component should return another custom component
  • This other custom component should return a div with text
• <MagicMotion> should cause no error if it returns a nested <MagicMotion>
• <MagicMotion> should cause no error if it returns a nested <MagicExit>