kocie-komponenty v0.0.47
Kocie komponenty
Animation
Obsługa animacji wejścia i wyjścia, zbudowana w oparciu o animate.css
<Animation in onEnter={{ name: "fadeIn" }}>
(☞゚ヮ゚)☞
</Animation>
ClickTag
Link <a />
z target="_blank"
, pobierający automatycznie adres docelowy reklamy.
<Clicktag />
Container
Pojemnik na kreację z określonym aspect ratio, odpowiadający rozmiarom projektów graficznych kreacji.
<Container>(∩^o^)⊃━☆</Container>
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>
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"
/>
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}
/>
);
};
Event
<Event name="intro" foo="bar" />
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>
);
};
12 months ago
12 months ago
12 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago