@rocketsofawesome/mirage
Version:
[Live Demo of the Pattern Library](https://rocketsofawesome.github.io/mirage/)
205 lines (203 loc) • 3.38 kB
Markdown
```js
<div style={{
boxSizing: 'border-box',
padding: '10px',
width: '100%',
backgroundColor: '#CCC'}
}>
<QuickAdd
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": true
},
{
"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": false
},
{
"id": 17358,
"sku": "5591-521-R",
"size": "M",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17359,
"sku": "5591-521-T",
"size": "S",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17360,
"sku": "5591-521-S",
"size": "L",
"price": 22.5,
"cost_price": null,
"in_stock": true
}
]}/>
</div>
```
```js
<div style={{
boxSizing: 'border-box',
padding: '10px',
width: '100%',
backgroundColor: '#CCC'}
}>
<QuickAdd loading
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": true
},
{
"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": false
},
{
"id": 17358,
"sku": "5591-521-R",
"size": "M",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17359,
"sku": "5591-521-T",
"size": "S",
"price": 22.5,
"cost_price": null,
"in_stock": true
},
{
"id": 17360,
"sku": "5591-521-S",
"size": "L",
"price": 22.5,
"cost_price": null,
"in_stock": true
}
]}/>
</div>
```