react-botw-grid-menu

A react component for rendering a Breath of the Wild style inventory menu.

Contents

• Install
• Usage
• Props
• License

Install

npm install --save react-botw-grid-menu

Peer Dependencies;

• React v16 +

Usage

import React, { Component } from 'react'

import { BotwGridMenu } from 'react-botw-grid-menu'

class Example extends Component {
  render() {
    return (
      <BotwGridMenu 
        items={[
          {
            id: "apple",
            name: "Apple",
            quantity: 159,
            icon: <i className="fa fa-apple" />,
            note: "A scrumptious apple.\r\nEat it to restore some hearts.",
          },
          {
            id: "bug",
            name: "Bug",
            quantity: 2,
            icon: <i className="fa fa-bug" />,
            note: "Yum"
          }
        ]}
      />
    )
  }
}

Example usage at https://darylbuckle.github.io/react-botw-menu-components.

Props

BotwGridMenu

| Property | Type | Default | Mandatory | Description | | -------- |------| --------| ----------| ------------| | items | botwItem[] | | true | The data to display in the grid. View the props for botwItem below. | | pageSize | number | 20 | false | The maximum number of items per page. | | page | number | | false | The current page number. Specify if you wish to control pagination, otherwise it'll be handled automatically. | | loading | boolean | false | false | If true a loading indicator will be displayed. Use when loading ASynchronously. | | fillPageWithEmpties | boolean | true | false | When this is true the page will be filled with empties. | | columnCount | number? | undefined | false | When specified, this number of columns will show. Otherwise the columns will fit the container. | | onPageChanged | (page) => void | | false | A callback for when navigating to a different page. | | onItemActive | (item) => void | | false | A callback for when hovering over an item. | | onItemInactive | (item) => void | | false | A callback for when exiting hover. | | onItemSelected | (item) => void | | false | A callback for clicking on an item. |

botwItem class

| Property | Type | Default | Mandatory | Description | | -------- |------| --------| ----------| ------------| | id | string | | true | Unique identifier for the item. | | name | string | | true | The name of the item. | | quantity | number | | false | Quantity of the item. | | imgSrc | string | | false | Src of the image. | | icon | any | | false | Alternative to ImgSrc. Allows JSX to be used for the image (e.g ) | | empty | boolean | false | false | Whether to show an empty item. |

License

MIT © DarylBuckle 2020