1.0.0 • Published 3 years ago
uikits-reactjs v1.0.0
UIkits Ui Components
Full response card style in css in react js. It's easy to use and provides powerful effect.
Table of Contents :-
CardEffect
TileHover
CardHover
features
Browser Support
Mobile response
Pass the value by props
Installtion :-
npm i react-uikit --save
How to use -:
CardEffect -:
Pass value by props, like the code-:
Example
import React from "react";
import { CardHover, TileHover, CardEffect } from "uikit-reacrjs";
import ReactDOM from "react-dom";
var Data = [
{
title: "Hello im msr",
content:
"Nature is a British weekly scientific journal founded and based in London, England. As a multidisciplinary publication,",
src:
"https://cdn.pixabay.com/photo/2020/09/24/03/50/success-5597527_960_720.png",
Colors: "red"
},
{
title: "Hello im bana",
content:
"Nature is a British weekly scientific journal founded and based in London, England. As a multidisciplinary publication, ",
src:
"https://cdn.pixabay.com/photo/2020/09/24/03/50/success-5597527_960_720.png",
Colors: "blue"
},
{
title: "Hello im neha",
content:
"Nature is a British weekly scientific journal founded and based in London, England. As a multidisciplinary publication,",
src:
"https://cdn.pixabay.com/photo/2020/09/24/03/50/success-5597527_960_720.png",
Colors: "red"
}
];
ReactDOM.render(
<>
<CardEffect Data={Data} />
</>,
document.getElementById("root")
);
CardHover -:
Pass value by props, like the code-:
Example :-
import React from "react";
import { CardHover, TileHover, CardEffect } from "uikit-reacrjs";
import ReactDOM from "react-dom";
var Data = [
{
title: "Hello im msr",
content:
"Nature is a British weekly scientific journal founded and based in London, England. As a multidisciplinary publication,",
src:
"https://cdn.pixabay.com/photo/2020/09/24/03/50/success-5597527_960_720.png",
Colors: "red"
},
];
ReactDOM.render(
<>
<CardHover Data={Data} />
</>,
document.getElementById("root")
);
TileHover -:
Example
import React from "react";
import { CardHover, TileHover, CardEffect } from "uikit-reacrjs";
import ReactDOM from "react-dom";
var Tile = [
{
title: "Hello im City",
content:
"Nature is a British weekly scientific journal founded and based in London, England. As a multidisciplinary publication,",
src:
"https://cdn.pixabay.com/photo/2020/12/17/00/43/skyscrapers-5838029_960_720.jpg"
},
{
title: "Hello im Tree",
content:
"Nature is a British weekly scientific journal founded and based in London, England. As a multidisciplinary publication,",
src:
"https://cdn.pixabay.com/photo/2020/12/13/16/22/snow-5828736_960_720.jpg"
},
{
title: "Hello im Ice",
content:
"Nature is a British weekly scientific journal founded and based in London, England. As a multidisciplinary publication,",
src:
"https://cdn.pixabay.com/photo/2020/11/02/18/03/snow-5707452_960_720.jpg"
}
];
ReactDOM.render(
<>
<TileHover Tile={Tile} />
</>,
document.getElementById("root")
);
1.0.0
3 years ago