@saeris/react-keyrune

1.0.9 • Public • Published

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.

Package Sidebar

Install

npm i @saeris/react-keyrune

Weekly Downloads

3

Version

1.0.9

License

MIT

Unpacked Size

73.2 kB

Total Files

34

Last publish

Collaborators

  • saeris