@saeris/react-keyrune
v1.0.9
Published
A simple React component wrapper around Keyrune
Downloads
8
Maintainers
Readme
📦 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.