flex-render-jsx

React JSX renderer & bidirectional JSON/JSX converter for LINE Flex Messages with custom action handlers.

flex-render-jsx provides an interactive React component (<FlexJSX />) to convert and render LINE Flex Message JSON specs directly into native React VDOM nodes with customizable action callbacks (actionHandlers) and non-action click handlers (onNoActionClick). It also includes bidirectional converters (flexToJsx, flexToJsxString, and jsxToFlex).

📦 Installation

# pnpm
pnpm add flex-render-jsx flex-render react react-dom

# npm
npm install flex-render-jsx flex-render react react-dom

# yarn
yarn add flex-render-jsx flex-render react react-dom

# bun
bun add flex-render-jsx flex-render react react-dom

🚀 Quick Start

1. Render Flex Message JSON with Action Handlers

Pass your Flex Message JSON object to <FlexJSX /> with targeted actionHandlers by action type:

import React from 'react'
import { FlexJSX, FlexActionProvider } from 'flex-render-jsx'
import type { FlexContainer } from 'flex-render'

const flexJSON: FlexContainer = {
  type: 'bubble',
  body: {
    type: 'box',
    layout: 'vertical',
    contents: [
      {
        type: 'text',
        text: 'Hello from FlexJSX!',
        weight: 'bold',
        size: 'lg',
      },
      {
        type: 'button',
        style: 'primary',
        action: {
          type: 'postback',
          label: 'Submit Data',
          data: 'action=submit_form',
        },
      },
    ],
  },
}

export function App() {
  return (
    <FlexJSX
      json={flexJSON}
      actionHandlers={{
        uri: (action, component, event) => console.log('URI clicked:', action.uri),
        postback: (action, component, event) => console.log('Postback clicked:', action.data),
        message: (action, component, event) => console.log('Message clicked:', action.text),
        datetimepicker: (action, component, event) => console.log('Datepicker clicked'),
        clipboard: (action, component, event) =>
          console.log('Clipboard copied:', action.clipboardText),
        '*': (action, component, event) => console.log('Catch-all action handler'),
      }}
      onNoActionClick={(component, event) => {
        console.log('Clicked element without action:', component)
      }}
    />
  )
}

⚙️ Props API Reference

<FlexJSX /> Props

| Prop Name | Type | Required | Description | | :---------------- | :-------------------------------------------------------------------------------------------- | :------- | :-------------------------------------------------------------------------------------------------------- | | json | FlexContainer (FlexBubble | FlexCarousel) | No | The LINE Flex Message JSON object to render. | | children | React.ReactNode | No | JSX element tree (e.g. <Bubble><Box>...</Box></Bubble>). | | actionHandlers | ActionHandlers | No | Dictionary of action handlers by type (uri, postback, message, datetimepicker, clipboard, *). | | onAction | (action: Action, component?: FlexComponent \| FlexBubble, event?: React.MouseEvent) => void | No | Fallback callback when an action is clicked. | | onNoActionClick | (component: FlexComponent \| FlexBubble, event: React.MouseEvent) => void | No | Callback when any element without an action property is clicked. | | renderAction | (action, element, context) => React.ReactNode | No | Custom renderer wrapper for elements with actions. | | disableAction | boolean | No | Set to true to disable all action click listeners. | | className | string | No | Additional CSS class name(s) to append to the wrapper div. | | style | React.CSSProperties | No | Inline style object to append to the wrapper div. |

🛠️ Utility Functions

flexToJsx(flexJson)

Transforms a LINE Flex Message JSON object into a React element tree using <Bubble>, <Box>, <Text>, <Button>, etc.

import { flexToJsx } from 'flex-render-jsx'

const reactElements = flexToJsx(flexJSON)

flexToJsxString(flexJson)

Formats a LINE Flex Message JSON object into a formatted JSX source code string.

import { flexToJsxString } from 'flex-render-jsx'

const jsxCode = flexToJsxString(flexJSON)
console.log(jsxCode)

jsxToFlex(element)

Converts a JSX element tree composed of <Bubble>, <Box>, <Text>, etc. back into a valid LINE Flex Message JSON object.

import { jsxToFlex, Bubble, Box, Text } from 'flex-render-jsx'

const flexJson = jsxToFlex(
  <Bubble>
    <Box layout="vertical">
      <Text>Hello World</Text>
    </Box>
  </Bubble>,
)

🌐 Context Provider

Wrap your application tree with <FlexActionProvider> to handle action clicks globally:

import { FlexActionProvider, FlexJSX } from 'flex-render-jsx'

export function Layout({ children }) {
  return (
    <FlexActionProvider
      actionHandlers={{
        postback: (action) => console.log('Global postback:', action.data),
      }}
    >
      {children}
    </FlexActionProvider>
  )
}

🔗 Related Packages

• flex-render - Core Vanilla JS rendering engine.
• flex-render-react - React component wrapper (HTML string rendering).
• flex-render-vue - Vue 3 component wrapper.

For a full working example, check out apps/react in the main repository.

🐛 Bug Reports

If you encounter any issues, please file a report on our GitHub Issue Tracker.

📄 License

MIT © Supakarn Laorattanakul (iamprompt)