search

Saeris / react-keyrune

ā„ļø A simple React component wrapper around Keyrune
https://react-keyrune.saeris.io/
MIT License
4 stars 2 forks source link
keyrune magic-the-gathering mtg react react-component

readme

React Keyrune

Package Version Build Status Code Coverage Known Vulnerabilities Dependencies

A simple React component wrapper around Keyrune.

šŸ“¦ Installation

npm install --save @saeris/react-keyrune keyrune
# or
yarn add @saeris/react-keyrune keyrune

Note: Keyrune is a required peer-dependency. This component will not work without it!

šŸ”§ Usage

To use this component, simply import it and pass in some props:

import React, { Component } from "react"
import { render } from "react-dom"
import { Keyrune } from "@saeris/react-keyrune"

const App = () => (
  <Keyrune set="leg" rarity="mythic" gradient fixed size="2x"/>
)

render(<App />, document.getElementById("root"))

šŸ“‹ Props

Prop Name Prop Type Required Default Value Notes
set string Yes None For a list of available sets, please refer to either Keyrune's documentation or the live demo site
rarity string No None Possible Values: common, c, uncommon, u, rare, r, mythic, m, timeshifted, t
size string No None Possible Values: 2x, 3x, 4x, 5x, 6x
gradient boolean No false Used to toggle a gradient effect on the icon. The color will change based on the value of rarity
foil boolean No false Used to toggle a foil color. This will override rarity and the fill will change when used in conjunction with gradient
fixed boolean No false Used to toggle fixed-width icons

šŸ–ļø Demo

You can either visit the live demo site, clone this repo and run the demo locally using yarn start and opening your browser to http://localhost:3000, or you can just play with it inside of CodeSandbox here.

The demo site includes a searchable list of all available sets with a handy preview tool with which you can quickly see the effects of the available props along with generated markup you can copy and paste right into your own application!

šŸ“ Alternatives

Looking for a Vue version of this component? We've got you covered! Check out Vue-Keyrune.

šŸ“£ Acknowledgements

Special thanks to Andrew Gioia the creator of Keyrune and to all that project's awesome contributors, without whom this library wouldn't exist!

And of course, a huge thanks to Wizards of the Coast for creating this game we all love!

šŸ„‚ License

All card symbol images are copyright Wizards of the Coast.

Keyrune is licensed under the the SIL OFL 1.1 license.

Released under the MIT license.