algolia / algolia/react-element-to-jsx-string

Parsing styled-jsx

Open
#270 1 comment 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
518
Forks
87
Avg merge
3h 56m
Merged PRs (30d)
3

Description

Hi,

I'm working on our UI Library and I want to convert all the components to string so we can shown it as code ready to copy and paste.

We use styled-jsx and we need to convert snippets like this ⬇️ into strings.

```
Save
{`
.address{
grid-template-columns: 66% 28%;
display: grid;
justify-content: space-between;
}
`}
```

This is the current output:

```

Save

<_class
css=".address[data-jsx="2524236662"]{-ms-grid-columns: 66% 28%;grid-template-columns: 66% 28%;display: -ms-grid;display: grid;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
/*@ sourceURL=components/ui-library/Forms.js */
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9yaWNhcmRvcmF1Y2gvU2l0ZXMvc2NhbGVhcGkuY29tL2Zyb250ZW5kL2NvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyIsImNvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ2tCLGdDQUV1QiwwQkFDakIsQUFEaUIsK0JBQ2pCLGtCQUNpQixBQURqQixjQUNpQiwwQkFDaEMsQUFEZ0MsdUJBQ2hDLEFBRGdDLCtCQUNoQyxDQUFBO0FDN0NULCtDQUErQyIsImZpbGUiOiJ0by5jc3MiLCJzb3VyY2VzQ29udGVu0= */"
styleId={2524236662}
/>

```

My code:
```
let codeForm = reactElementToJSXString(
this.props.children,
{
showDefaultProps: false,
filterProps: ['data-jsx']
}
);
```

Thanks for this amazing lib!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.