1.0.2 • Published 3 years ago
react-botw-grid-menu v1.0.2
react-botw-grid-menu
A react component for rendering a Breath of the Wild style inventory menu.
Contents
Install
npm install --save react-botw-grid-menuPeer 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
1.0.2
3 years ago