1.0.0 • Published 9 months ago
winner-podium v1.0.0
Installation
npm install winner-podium
Usage
import { WinnersPodium } from "winner-podium";
<WinnersPodium
options={{
container: {
style: {
borderRadius: "1rem",
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
},
className: "",
},
podiumHeight: 70,
podiumWidth: 200,
backgroundColor: "rgb(2 193 189)",
is3D: true,
topViewHeight: 30,
header: <h1>Weekly Star Performers</h1>,
footer: (
<div>
<div>
<b>Rank 1:</b> Name-1
</div>
<div>
<b>Rank 2:</b> Name-2
</div>
<div>
<b>Rank 3:</b> Name-3
</div>
</div>
),
winners: {
rank1: (
<img
src="./man.png"
style={{
height: 100,
width: 100,
objectFit: "cover",
}}
/>
),
rank2: (
<img
src="./man.png"
style={{
height: 100,
width: 100,
objectFit: "cover",
}}
/>
),
rank3: (
<img
src="./man.png"
style={{
height: 100,
width: 100,
objectFit: "cover",
}}
/>
),
},
}}
/>;Preview
Hints:
2D:
3D:
Options
You can pass the following options to WinnersPodium:
| Parameter | Type | Default | Description |
|---|---|---|---|
| container | object { style: object; className: string } | Provide style or className to the podium | |
| podiumHeight | number | 70 | height of the smallest(rank-3) podium |
| podiumWidth | number | 100 | width of each rank podium |
| backgroundColor | string | rgb(2 193 189) | color of the podium. Note: Add colors in rgb only |
| is3D | boolean | false | Display the podium in 2D |
| topViewHeight | number | 30 | height of top of the stand in 3D view |
| header | JSX.Element | Element to display at the top | |
| footer | JSX.Element | Element to display at the bottom | |
| winners | object { rank1: JSX.Element; rank2: JSX.Element; rank3:JSX.Element } | Winner's Details to show on the podium |
Sample config using all options
{
container: {
style: {
color: "white"
},
className: "winners-podium-container",
},
podiumHeight: 70,
podiumWidth: 200,
backgroundColor: "rgb(2 193 189)",
is3D: true,
topViewHeight: 30,
header: <header>Header</header>,
footer: <footer>Footer</footer>,
winners: {
rank1: <h4>Name-1</h4>,
rank2: <h4>Name-2</h4>,
rank3: <h4>Name-3</h4>,
},
}Author
Find me on Linkedin: https://www.linkedin.com/in/sushma-goswami-8550bb146/
License
winner-podium is available under the MIT license.