0.0.5 • Published 8 months ago
ghewar v0.0.5
Ghewar
Table of Contents
Introduction
Welcome to Ghewar! This library provides a collection of reusable React components designed to help you build your applications quickly and efficiently. Each component is customizable and adheres to best practices.
Installation
You can install the library via npm:
npm install ghewar
Usage
Simple Card
import { Button, Card, Heading } from 'ghewar'
const App = () => (
<div>
<Card
variant='secondary'
size='medium'
header = {<Heading level={2}>This is a sample card</Heading>}
body = {<p>This is a sample card body text</p>}
footer = {<Button onClick={()=>alert('Clicked OK')}>OK</Button>}
/>
</div>
);
export default App;
Complex Card
import { Button, Card, Heading, ImageContainer, Stack } from "ghewar";
import { Product } from "./ListingPage";
const ProductCard = ({ title, price, thumbnail }: Product) => {
return (
<Card
header={
<Heading level={5} textStyle="bold">
{title}
</Heading>
}
body={
<Stack direction="horizontal" justifyContent="space-between">
<p>{price}</p>
<ImageContainer src={thumbnail} alt={title} />
</Stack>
}
footer={<Button onClick={() => alert("Product is added..")}>ADD</Button>}
variant="default"
size="medium"
/>
);
};
export default ProductCard;
Fetching data from Service
import { DotLoader, ErrorDisplay, Stack, useFetch } from "ghewar";
import ProductCard from "./ProductCard";
export interface Product {
id?: number;
title: string;
price: string;
thumbnail: string;
}
const ListingPage = () => {
const { data, isLoading, error } = useFetch<Product>({
url: "https://dummyjson.com",
endpoint: "products",
dataKey: "products",
});
if (isLoading) return <DotLoader />;
if (error) return <ErrorDisplay />;
if (!data || data.length < 1) {
return <p>There is no data to display..</p>;
}
return (
<Stack direction="horizontal">
{data.map((dataItem) => (
<div key={dataItem.id}>
<ProductCard
title={dataItem.title}
price={dataItem.price}
thumbnail={dataItem.thumbnail}
/>
</div>
))}
</Stack>
);
};
export default ListingPage;
License
This project is licensed under the MIT License. See the LICENSE file for details.
Author
Biswajit Sundara