Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rosylilly/react-jsx-renderer
A React component for Rendering JSX
https://github.com/rosylilly/react-jsx-renderer
jsx react renderer template
Last synced: 3 days ago
JSON representation
A React component for Rendering JSX
- Host: GitHub
- URL: https://github.com/rosylilly/react-jsx-renderer
- Owner: rosylilly
- License: mit
- Created: 2021-05-25T22:04:48.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-06-20T16:31:28.000Z (over 2 years ago)
- Last Synced: 2024-12-22T13:14:56.772Z (12 days ago)
- Topics: jsx, react, renderer, template
- Language: TypeScript
- Homepage: https://aduca.org/react-jsx-renderer/
- Size: 10.4 MB
- Stars: 47
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React JSX Renderer
[](https://www.npmjs.org/package/react-jsx-renderer)
[](https://www.npmjs.com/package/react-jsx-renderer/v/nightly)
[](https://aduca.org/react-jsx-renderer/)
[](https://codecov.io/gh/rosylilly/react-jsx-renderer)
[](https://david-dm.org/rosylilly/react-jsx-renderer)
[](https://packagephobia.com/result?p=react-jsx-renderer)
[](https://opensource.org/licenses/MIT)
[](https://github.com/rosylilly/react-jsx-renderer/actions/workflows/latest.yml)
[](https://github.com/rosylilly/react-jsx-renderer/actions/workflows/nightly.yml)
[](https://github.com/rosylilly/react-jsx-renderer/actions/workflows/build.yml)
[](https://github.com/rosylilly/react-jsx-renderer/actions/workflows/test.yml)
[](https://github.com/rosylilly/react-jsx-renderer/actions/workflows/lint.yml)
A React Component for Rendering JSX.
## Description
React JSX Renderer is a React Component for rendering JSX to React nodes.
It has a JavaScript Runtime inside, and can execute the user's JSX with controlled behavior.
[Launch Demo](https://aduca.org/react-jsx-renderer/)
## Features
- [x] Rendering JSX as React nodes
- [x] TypeScritpt ready
- [x] Provides CommonJS and ES Modules
- [x] JavaScript syntax and featues
- without async, await and generator
- [x] Injectable custom React components
- [x] Pass binding variables
- [x] Applicable filters to parsed nodes
- You can create allowlist / denylist filters to tagName, attributes or properties
- [x] Avoid user's call expressions
- [x] Avoid user's new expressions
- [x] Parse with [meriyah](https://github.com/meriyah/meriyah)
## Installation
1. `npm install -s react-jsx-renderer` (or `yarn add react-jsx-renderer`)
2. Add `import { JSXRenderer } from 'react-jsx-renderer';`
3. `` to render `Hello, World`
## Requirements
- **React**: >= 16.0.0
## Options
```typescript
interface ParseOptions {
/**
* Options of parser
*/
meriyah?: meriyah.Options;
/**
* When this option is enabled, always parse as an expression.
*/
forceExpression?: boolean;
}
interface EvaluateOptions {
/**
* binding
*/
binding?: Binding;
/**
* components
*/
components?: ComponentsBinding;
/**
* Prefix of generated keys.
*/
keyPrefix?: string;
/**
* When this option is enabled, no key will be generated
*/
disableKeyGeneration?: boolean;
/**
* When this option is enabled, bindings will be excluded from the component search.
*/
disableSearchCompontsByBinding?: boolean;
/**
* When this option is enabled, Call Expression and New Expression will always return undefined.
*/
disableCall?: boolean;
/**
* When this option is enabled, New Expression will always return undefined.
*/
disableNew?: boolean;
/**
* When this option is enabled, access to undefined variables will raise an exception.
*/
raiseReferenceError?: boolean;
/**
* List of functions allowed to be executed.
*
* If empty, all functions will be allowed to execute.
*/
allowedFunctions?: AnyFunction[];
/**
* Add user-defined functions to the allowed list.
*/
allowUserDefinedFunction?: boolean;
/**
* List of functions denied to be executed.
*
* If empty, all functions will be allowed to execute.
*/
deniedFunctions?: AnyFunction[];
}
interface RenderingOptions {
/**
* List of filters to be applied to elements.
*/
elementFilters?: JSXElementFilter[];
/**
* List of filters to be applied to fragments.
*/
fragmentFilters?: JSXFragmentFilter[];
/**
* List of filters to be applied to text nodes.
*/
textFilters?: JSXTextFilter[];
/**
* When this option is enabled, non-existent HTML elements will not be rendered.
*/
disableUnknownHTMLElement?: boolean;
/**
* Function to determine Unknown HTML Element
*/
isUnknownHTMLElementTagName?: UnknownHTMLElementTagNameFunction;
}
interface RendererOptions extends {
/**
* JSX code
*/
code?: string;
/**
* The component that will be displayed instead when an error occurs.
*/
fallbackComponent?: JSXFallbackComponent;
/**
* If you want to receive the parsed result, set a Ref object to this option.
*/
refNodes?: Ref;
}
```
## Usage
### Using like a simple HTML template engine
input:
```javascript
import { render } from 'react-dom';
import { JSXRenderer } from 'react-jsx-renderer';
const root = document.getElementById('root');
render(
Hello, {name}'}
/>,
root
);
```
to:
```html
Hello, Sho Kusano
```
### Using JSX with JavaScript expressions
input:
```javascript
render(
+ {three + seven}' +
'
- {three - seven}
' +
'bitwise shift {three << seven}
'
}
/>,
root
);
```
to:
```html
+ 10
- -4
bitwise shift 384
```
### Using JSX with your favorite custom components
```javascript
const Red = ({ children }) => {children}
render(
red'}
/>,
root
);
```
to:
```html
red
```
### Convert JSX with filters
```javascript
const hrefFilter = (element: JSXElement) => {
const { props, component, children } = element;
if (component !== 'a') return element;
let href = props.href || '';
if (href.includes('//')) {
href = secureURLConvert(href); // Add prefix https://secure.url/redirect?url=
}
const filteredProps = { ...props, href };
return { component, children, props: filteredProps };
}
render(
root' +
'
' +
'' +
'' +
}
/>,
root
);
```
to:
```html
```
### Provide options by context
ex: Server side rendering.
```javascript
import { JSDOM } from 'jsdom';
render(
{
const { window } = new JSDOM();
return window.document.createElement(tagName) instanceof window.HTMLUnknownElement;
}}>
Avoid'
}
/>
,
root
);
```
to:
```html
```
## License
[MIT License](https://github.com/rosylilly/react-jsx-renderer/blob/main/LICENSE)
## Related projects
- [react-jsx-parser](https://github.com/TroyAlford/react-jsx-parser)