Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/publica-re/react-xml-transformer
A XSLT-inspired XML transformer for React
https://github.com/publica-re/react-xml-transformer
react xml-transformer xslt
Last synced: 9 days ago
JSON representation
A XSLT-inspired XML transformer for React
- Host: GitHub
- URL: https://github.com/publica-re/react-xml-transformer
- Owner: publica-re
- License: gpl-3.0
- Created: 2020-07-24T18:43:22.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-07-30T15:01:03.000Z (over 4 years ago)
- Last Synced: 2024-12-16T22:22:42.490Z (about 1 month ago)
- Topics: react, xml-transformer, xslt
- Language: TypeScript
- Size: 2.18 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-xml-transformer ⚙
> A XSLT-inspired XML transformer for React
[](https://www.npmjs.com/package/react-xml-transformer) [](https://standardjs.com)
## Note
This is currently a proof of concept. I do not recommend using it in a production build.
Contributions are still welcome to ship it into the wild ! 🚀
## Demonstration
You can find a demo [here](https://react-xml-transformer.publica.re/demo/) and the source code on [GitHub](https://github.com/publica-re/react-xml-transformer/blob/master/example/) !
## Install
```bash
yarn add react-xml-transformer
```
## Usage
### Basic usage
First, you have to note that we rely on a global context to which the templates are registered, which allows us to use concurrent template systems in the same project.
We thus recommend to create a file `context.ts` with the following code:
```ts
import Transformer from "react-xml-transformer";
const ctx = new Transformer.Context();
export default ctx;
```
When that's done, you can create your main component that imports your context. That's a good place to load the XML file you want to render too, but you can also do as I did, that is to pass the document to your `App`.
```ts
import React from "react";
import Transformer from "react-xml-transformer";
import ctx from "./context";
export default class App extends React.Component<{ document: XMLDocument }> {
render() {
if (this.state.document !== undefined)
return (
);
return null;
}
}
```
You're now ready to implement your first template ! In order to do that, just inherit `Transformer.Template` and you can get rocking !
```ts
import * as React from "react";
import Transformer from "react-xml-transformer";
import ctx from "./context";
export default class Para extends Transformer.Template {
render() {
return (
);
}
}
ctx.register(Para, { path: "para" });
```
Notice two things: 1. we imported our `context` 2. we used it to register our `template`. The `path` is just the XPath that has to match your node !
It now only remains to import our newly defined template in our `App`, and we're done !
```ts
...
import Transformer from "react-xml-transformer";
import ctx from "./context";
import "./Para";
export default class App extends React.Component<{ document: XMLDocument }> {
...
```
### Go futher
You can take a look at [GitHub](https://github.com/publica-re/react-xml-transformer/blob/master/example/) for an example or the [documentation](https://react-xml-transformer.publica.re) !
## License
Copyright 2020, [David Baumgartner](https://github.com/dvbmgr).
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see .
## Contributing
I welcome happily contributions to pull request through [GitHub](https://github.com/publica-re/react-xml-transformer).