@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
147 lines (145 loc) • 3.1 kB
Markdown
```js
<QuickAddSizes
quickAdd={(sku) => () => { console.log(sku) } }
variants={
[
{
"id": 17350,
"sku": "5591-521-L",
"size": "6",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17351,
"sku": "5591-521-N",
"size": "10",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17352,
"sku": "5591-521-I",
"size": "4",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17353,
"sku": "5591-521-E",
"size": "8",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17354,
"sku": "5591-521-M",
"size": "7",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17355,
"sku": "5591-521-H",
"size": "3",
"price": 22.5,
"cost_price": null,
"in_stock": false
},
{
"id": 17356,
"sku": "5591-521-O",
"size": "12",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17357,
"sku": "5591-521-K",
"size": "5",
"price": 22.5,
"cost_price": null,
"in_stock": true
}
]
}/>
```
```js
<QuickAddSizes
loading
quickAdd={(sku) => () => { console.log(sku) } }
variants={
[
{
"id": 17350,
"sku": "5591-521-L",
"size": "6",
"in_stock": true
},
{
"id": 17351,
"sku": "5591-521-N",
"size": "10",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17352,
"sku": "5591-521-I",
"size": "4",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17353,
"sku": "5591-521-E",
"size": "8",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17354,
"sku": "5591-521-M",
"size": "7",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17355,
"sku": "5591-521-H",
"size": "3",
"price": 22.5,
"cost_price": null,
"in_stock": false
},
{
"id": 17356,
"sku": "5591-521-O",
"size": "12",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17357,
"sku": "5591-521-K",
"size": "5",
"price": 22.5,
"cost_price": null,
"in_stock": true
}
]
} />
```