ab3204f9f1
The replaces the NextJS site powering FreeSewing.dev with a Docusaurus setup. It's part of my efforts to simplify FreeSewing's setup so we can focus on our core value proposition.
87 lines
2.2 KiB
Text
87 lines
2.2 KiB
Text
---
|
|
title: Attributes.asRenderProps()
|
|
---
|
|
|
|
The `Attributes.asRenderProps()` method will return the data stored in the
|
|
attributes as a serializable JavaScript object. This method is typically
|
|
note invoked directly but rather called under the hood as a result of
|
|
calling [`Pattern.getRenderProps()`](/reference/api/pattern/getrenderprops).
|
|
|
|
## Signature
|
|
|
|
```js
|
|
Object attributes.asRenderProps()
|
|
```
|
|
|
|
## Returned object properties
|
|
|
|
This returns JavaScript object has the following properties:
|
|
|
|
| Name | Description |
|
|
| ----:| ----------- |
|
|
| `list`| A plain object representation of all attributes |
|
|
| `forSvg`| All attributes rendered as a string for inclusion in an SVG (or HTML) tag |
|
|
| `forCss`| All attributes rendered as a string for inclusion in CSS |
|
|
| `circle`| An array of circles radii to render (set as the `data-circle` attribute) |
|
|
| `circleProps`| A plain object representation of all circle-specific attributes (set as the `data-circle-*` attribute) |
|
|
| `text`| An array of texts to render (set as the `data-text` attribute) |
|
|
| `textProps`| A plain object representation of all text-specific attributes (set as the `data-text-*` attribute) |
|
|
|
|
## Example
|
|
|
|
```js
|
|
const attr = new Attributes()
|
|
.add('class', 'various')
|
|
.add('stroke', 'red')
|
|
.add('stroke-width', 2)
|
|
.add('data-circle', 20)
|
|
.add('data-circle-class', 'lining')
|
|
.add('data-text', 'test')
|
|
.add('data-text-dx', 3)
|
|
|
|
const json = JSON.stringify(
|
|
attr.asRenderProps(), null ,2
|
|
)
|
|
|
|
/* json holds:
|
|
{
|
|
"list": {
|
|
"class": [
|
|
"various"
|
|
],
|
|
"stroke": [
|
|
"red"
|
|
],
|
|
"stroke-width": [
|
|
2
|
|
],
|
|
"data-circle": [
|
|
20
|
|
],
|
|
"data-circle-class": [
|
|
"lining"
|
|
],
|
|
"data-text": [
|
|
"test"
|
|
],
|
|
"data-text-dx": [
|
|
3
|
|
]
|
|
},
|
|
"forSvg": " class=\"various\" stroke=\"red\" stroke-width=\"2\" data-circle=\"20\" data-circle-class=\"lining\" data-text=\"test\" data-text-dx=\"3\"",
|
|
"forCss": " class:various; stroke:red; stroke-width:2; data-circle:20; data-circle-class:lining; data-text:test; data-text-dx:3;",
|
|
"circle": [
|
|
20
|
|
],
|
|
"circleProps": {
|
|
"className": "lining"
|
|
},
|
|
"text": [
|
|
"test"
|
|
],
|
|
"textProps": {
|
|
"dx": "3"
|
|
}
|
|
}
|
|
*/
|
|
```
|