@empglabs/react-native-jsx-parser

Modified JSX Parser to parse JSX string in React Native

Usage no npm install needed!

<script type="module">
  import empglabsReactNativeJsxParser from 'https://cdn.skypack.dev/@empglabs/react-native-jsx-parser';
</script>

README

react-native-jsx-parser

Modified JSX Parser to parse JSX string in React Native

Install

npm i react-native-jsx-parser --save

Install Dependencies

npm i react-jsx-parser --save

Usage

// Use import or require()
import RNJsxParser from 'RNJsxParser';

// Import all the components needed in the string
// Example:
import { PostCard, CommentCard } from './customComponents

// Define the components objects

const postComponents = { PostCard, CommentCard }

// Define the bindings if you have

const postBindings = { lorem: 'ipsum', handleEvent: () => { /* */ } }

// The Jsx String, you could also store and fetch from JSON file
// Just remember to wrap with React Fragment <> </>

const stringJsx = '<><PostCard> Hello </PostCard> <CommentCard/></>'

<RNJsxParser bindings={postBindings} components={postComponents} jsx={stringJsx} />

Props

Props is all the same as react-jsx-parser, but only allow 3 props bindings, components and jsx. You could use other props by editing the file inside node_modules/react-native-jsx-parser.

See the available react-jsx-parser Here