react-sd-card
v1.0.15
Published
React Sleek Design Card is a simple, sleek and customizable React component library for displaying cards in web applications.
Downloads
17
Readme
React SD Card is a simple and customizable React component library for displaying cards in web applications.Check live sample at my portfolio site (https://shubham10divakar.github.io/showcasehub/)
NPM
NPM Link - https://www.npmjs.com/package/react-sd-card?activeTab=readme
Installation
Install react-sd-card
using npm or yarn:
npm install react-sd-card
or
bash
yarn add react-sd-card
Usage
Import Card component from react-sd-card and use it in your React application:
jsx
// App.js
import logo from './logo.svg';
import './App.css';
import { Card } from 'react-sd-card';
function App() {
const publications = [
{ id: 1, title: 'Publication 1', hdetail1: 'Year',detail1: 2021, hdetail2:'citations',detail2: 15, imageUrl: logo},
{ id: 1, title: 'Publication 2', hdetail1: 'Year',detail1: 2022, hdetail2:'citations',detail2: 45, imageUrl: logo},
// Add more publications as needed
];
return (
<div className="App">
<h1>My React App</h1>
<div className="App">
{publications.map((pub) => (
<Card
key={pub.id}
id={pub.id}
title={pub.title}
detail1={pub.detail1}
hdetail1= {pub.hdetail1}
detail2={pub.detail2}
hdetail2= {pub.hdetail2}
imageUrl={pub.imageUrl}
/>
))}
</div>
</div>
);
}
export default App;
Images as per above code output and some work samples
Props
key: React key prop used for list items to help React identify which items have changed, are added, or are removed.
id: Unique identifier for the publication card, typically used for React's reconciliation algorithm.
title: Title of the publication being displayed.
detail1: Value for the first detail information (e.g., publication year).
hdetail1: Header or label for the first detail (e.g., "Year").
detail2: Value for the second detail information (e.g., number of citations).
hdetail2: Header or label for the second detail (e.g., "Citations").
detail3: Value for the third detail information (if applicable).
hdetail3: Header or label for the third detail.
imageUrl: URL for an image associated with the publication (optional).
textAlignment: Alignment of text content within the card ('left', 'center', 'right', etc.).
customStyles: Optional prop for passing custom styles to the card component to customize its appearance.
About Me
I am Subham Divakar and I am the developer of multiple python and react libraries. Check out my worksamples on my portfolio site.
Connect with Me
LinkedIn: https://www.linkedin.com/in/subham-divakar-a7420a12a/
GitHub: https://github.com/shubham10divakar
Portfolio: https://shubham10divakar.github.io/showcasehub/
Feedback
Your feedback is important! Please share your thoughts and suggestions. License
This project is licensed under the MIT License.