react-magic-motion

A library that magically animates your React components.

AnimationReact
Etesam913/react-magic-motionreact-magic-motion.comreact-magic-motion

README

react-magic-motion


react-magic-motion.com


react-magic-motion is a react.js library that ✨ magically animates your components.


⭐️ Getting Started


📦 Install


  1. ```bash
  2. npm i react-magic-motion
  3. ```

🔎 Simple Example


🎥 Demo


https://github.com/Etesam913/react-magic-motion/assets/55665282/dfc56ad5-5012-4f5e-90cc-8ec372527320

🧑‍💻 Code


  1. ```jsx
  2. import { useState } from "react";
  3. import { MagicMotion } from "react-magic-motion";

  5. function ListItem({ children }: { children: string }) {
  6.   return (
  7.     <li
  8.       style={{
  9.         backgroundColor: "#4d4d4dff",
  10.         width: "20rem",
  11.         padding: "0.5rem",
  12.       }}
  13.     >
  14.       {children}
  15.     </li>
  16.   );
  17. }

  19. export default function App() {
  20.   const [areGoalsShowing, setAreGoalsShowing] = useState(true);
  21.   return (
  22.     <MagicMotion>
  23.       <div
  24.         style={{
  25.           margin: "0.75rem auto 0",
  26.           width: "20rem",
  27.           display: "flex",
  28.           flexDirection: "column",
  29.           gap: "1rem",
  30.           overflow: "hidden",
  31.         }}
  32.       >
  33.         <h1
  34.           style={{
  35.             fontWeight: "bold",
  36.             margin: "0.25rem",
  37.           }}
  38.         >
  39.           My Goals
  40.         </h1>
  41.         {areGoalsShowing && (
  42.           <ul
  43.             style={{
  44.               display: "flex",
  45.               flexDirection: "column",
  46.               gap: "0.75rem",
  47.               listStyle: "none",
  48.               paddingLeft: "0.5rem",
  49.               margin: 0,
  50.             }}
  51.           >
  52.             <ListItem>�� Make 10 three pointers in a row</ListItem>
  53.             <ListItem>��️‍♂️ Bench press 225 lbs</ListItem>
  54.             <ListItem>��‍♂️ Run a 5k in under 20 minutes</ListItem>
  55.           </ul>
  56.         )}
  57.         <button
  58.           style={{
  59.             width: "fit-content",
  60.             whiteSpace: "nowrap",
  61.             padding: "0.5rem 1rem",
  62.             backgroundColor: "#5a70ed",
  63.             color: "#ffffff",
  64.             border: 0,
  65.             cursor: "pointer",
  66.             fontFamily: "inherit",
  67.           }}
  68.           onClick={() => setAreGoalsShowing(!areGoalsShowing)}
  69.         >
  70.           {areGoalsShowing ? "Hide" : "Show"} my goals
  71.         </button>
  72.       </div>
  73.     </MagicMotion>
  74.   );
  75. }
  76. ```

💫 Examples


- To do list
- Accordion
- Sidebar
- Expandable Card
- Grid Area
- Search
- Tabs

📓 Docs


- For a full understanding of react-magic-motion visit the docs here

❓ Want to Contribute


- Visit the contributing.md