flex-render-react

React component for rendering LINE Flex Messages (Bubbles & Carousels).

flex-render-react provides a native React component (<FlexPreview />) to easily display raw LINE Flex Message JSON specs directly in React applications (React 18 & 19 supported).

📦 Installation

# pnpm
pnpm add flex-render-react flex-render

# npm
npm install flex-render-react flex-render

# yarn
yarn add flex-render-react flex-render

# bun
bun add flex-render-react flex-render

🚀 Quick Start

Import <FlexPreview /> and pass your Flex Message JSON object to the json prop:

import React from 'react'
import { FlexPreview } from 'flex-render-react'
import type { FlexContainer } from 'flex-render'

const flexJSON: FlexContainer = {
  type: 'bubble',
  body: {
    type: 'box',
    layout: 'vertical',
    contents: [
      {
        type: 'text',
        text: 'Hello from React!',
        weight: 'bold',
        size: 'lg',
        color: '#1DB446',
      },
    ],
  },
}

export function App() {
  return (
    <div className="preview-wrapper">
      <FlexPreview json={flexJSON} className="custom-flex-style" />
    </div>
  )
}

Note: Required CSS styles are bundled and automatically imported with the component. You can also manually import import 'flex-render-react/css' if needed.

⚙️ Props API Reference

<FlexPreview /> Props

| Prop Name | Type | Required | Description | | :---------- | :----------------------------------------------- | :------- | :-------------------------------------------------------------------------------------------------------------------- | | json | FlexContainer (FlexBubble | FlexCarousel) | Yes | The Flex Message JSON object exported from LINE Flex Message Simulator. | | className | string | No | Additional CSS class name(s) to append to the wrapper div. |

🔗 Related Packages

• flex-render - Core Vanilla JS rendering engine.
• 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)