Dfk-hero-viewer NPM

DFK Hero Viewer

DFK Hero Viewer is a React implementation for showing hero cards(NFTs) from the succesful blockchain game DefiKingdom.

Prerequisites

Node.js ≥v16.14.x
React ≥v17.x

Install

You can either clone this repository or use the npm package

npm i dfk-hero-viewer

Usage

The main component that is used to render the hero card is HeroCard

import {HeroCard} from "dfk-hero-viewer";

<HeroCard hero={hero} isAnimated={true} isFlipped={false} />

the flipToggle property can be applied to the component to give the ability of flipping the card onClick see example for details.

To get the hero object needed to rendered the card correctly there is a function included called fetchHero

import {fetchHero} from "dfk-hero-viewer";

exapmles

1. you can use the flipToggle property to give the card the ability to flip on user click instead of using a button -

...return (
	<HeroCard hero={hero} flipToggle />
)

1a. you can also spread props to the component -

...
const props = { hero, isFlipped: true, isAnimated: false, flipToggle: true };

return (
	<HeroCard {...props} />
)

2. render the hero on page load and a button to flip the card -

import { useState, useEffect } from "react";
import { fetchHero, HeroCard } from "dfk-hero-viewer";

function App() {
	const [hero, setHero] = useState<any>(null);
	const [flipped, setFlipped] = useState(false);

	useEffect(() => {
		const getHero = async () => {
			let heroData = await fetchHero(1);
			setHero(heroData);
		};
		getHero();
	}, []);

	return (
		<>
			{hero && (
				<>
					<HeroCard hero={hero} isFlipped={flipped} isAnimated={true} />
					<button onClick={() => setFlipped(!flipped)}>Flip card</button>
				</>
			)}
		</>
	);
}

export default App;

3. a form to fetch the hero and render the card -

import { useState } from "react";
import { fetchHero, HeroCard } from "dfk-hero-viewer";

interface heroData {
	hero: any;
}

function SearchHero() {
	const [hero, setHero] = useState<heroData | any>(null);
	const [heroIdInput, setHeroIdInput] = useState();

	const onSubmit = async (evt: any) => {
		evt.preventDefault();
		const hero = await fetchHero(heroIdInput);
		setHero(hero);
	};

	return (
		<>
			<div>
				<div>
					<form onSubmit={onSubmit}>
						<input
							defaultValue={heroIdInput}
							onChange={(e: any) => setHeroIdInput(e.target.value)}
							type="text"
							placeholder="Enter Hero Id"
						></input>
						<button type="submit">Fetch hero card</button>
					</form>
				</div>

				<div>
					{hero && (
						<>
							<HeroCard
								hero={hero}
								isFlipped={false}
								isAnimated={true}
							/>
							<HeroCard
								hero={hero}
								isFlipped={true}
								isAnimated={true}
							/>
						</>
					)}
				</div>
			</div>
		</>
	);
}

Credit

Thanks to Kingdom studios the creators of DefiKingdoms for allowing me to use the art assets and the hero component source code that was used to make this project happen.