Kocie komponenty

Animation

Obsługa animacji wejścia i wyjścia, zbudowana w oparciu o animate.css

<Animation in onEnter={{ name: "fadeIn" }}>
  (☞ﾟヮﾟ)☞
</Animation>

Dokumentacja komponentu

ClickTag

Link <a /> z target="_blank", pobierający automatycznie adres docelowy reklamy.

<Clicktag />

Dokumentacja komponentu

Container

Pojemnik na kreację z określonym aspect ratio, odpowiadający rozmiarom projektów graficznych kreacji.

<Container>(∩^o^)⊃━☆</Container>

Dokumentacja komponentu

Router

Prosty router do obsługi przełączania się pomiędzy różnymi ekranami / stronami.

      <RouterProvider
        intitalRoute={"route_2"}
        animation={{
          onEnter: { name: "slideInLeft" },
          onExit: { name: "fadeOutRight" },
        }}
      >
        <Route name="route_1">
          <Link to="route_2">(☞ﾟヮﾟ)☞</Link>
        </Route>
        <Route name="route_2">
          <Link to="route_3">(☞ﾟヮﾟ)☞</Link>
        </Route>
        <Route name="route_3">
          <Link to="route_1">(☞ﾟヮﾟ)☞</Link>
        </Route>
      </RouterProvider>

Dokumentacja komponentu

Video

<Video
  autoPlay
  aspectRatio="16x9"
  muted
  onClick="play"
  mp4="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"
/>

Dokumentacja komponentu

Canvas

import image from "./image.png";

const App = () => {
  const handleDrawStart = () => {
    console.log("handleDrawStart");
  };
  const handleDrawEnd = () => {
    console.log("handleDrawEnd");
  };
  const handleComplete = () => {
    console.log("handleComplete");
  };
  return (
      <Canvas
        image={image}
        objectFit="cover"
        brushRadius={30}
        requiredCompletion={25}
        onDrawStart={handleDrawStart}
        onDrawEnd={handleDrawEnd}
        onComplete={handleComplete}
      />
  );
};

Dokumentacja komponentu

Event

<Event name="intro" foo="bar" />

Dokumentacja komponentu

Compare

const LeftSide = () => {
  return <div style={{ background: "red" }} />;
};

const RightSide = () => {
  return <div style={{ background: "green" }} />;
};

const Icon = () => {
  return <div style={{ background: "blue", width: "50px", height: "50px" }} />;
};

const App = () => {
  return (
    <Container>
      <Compare leftSide={LeftSide} rightSide={RightSide} icon={Icon} />
    </Container>
  );
};

Dokumentacja komponentu