react-dialogic
Advanced tools
A React UI library for creating dialogue systems with a game-like interface | 一個專為 React 應用開發的對話系統 UI 套件，提供類遊戲風格的對話介面
一個專為 React 應用開發的對話系統 UI 套件，提供類遊戲風格的對話介面
A dialogue system UI kit for React applications with game-style interface
React-Dialogic 是一個功能完整的 React 對話系統元件庫，專為建立互動式對話體驗而設計。無論是視覺小說、游戲對話、教學引導還是角色驅動的用戶界面，本套件都能提供令人印象深刻的對話流程。
React-Dialogic is a comprehensive React dialogue system component library designed for creating interactive dialogue experiences. Whether for visual novels, game dialogues, onboarding tutorials, or character-driven interfaces, this library provides engaging conversation flows.
npm install react-dialogic
# 或/or
yarn add react-dialogic
import { ReactDialogic } from 'react-dialogic';
// 重要：引入樣式
import 'react-dialogic/dist/styles.css';
// 定義位置常量（可選）
const Position = {
LEFT: 'left',
RIGHT: 'right',
CENTER: 'center'
};
// 角色配置
const characters = {
yangGuo: {
name: '楊過',
images: {
default: '/images/yangGuo.png'
},
textColor: '#3a86ff',
defaultPosition: Position.LEFT
},
xiaoLongNv: {
name: '小龍女',
images: {
default: '/images/xiaoLongNv.png',
blindfolded: '/images/xiaoLongNv-blindfolded.png'
},
textColor: '#8338ec',
defaultPosition: Position.RIGHT
}
};
// 對話配置
const dialogue = {
// 場景一：開始
start: {
background: '/images/grassland.png',
sequence: [
// 角色對話
{
speaker: 'yangGuo',
text: '姑姑，我們今天練什麼武功？',
position: Position.LEFT
},
{
speaker: 'xiaoLongNv',
text: '我們今天練習玉女心經。',
position: Position.RIGHT
},
// 旁白 - 不指定角色
{
text: '（兩人來到了練武場）'
},
// 選項分支
{
speaker: 'xiaoLongNv',
text: '你想先練習哪個部分？',
choices: [
{ text: '內功心法', next: 'innerPower' },
{ text: '劍法招式', next: 'swordSkills' }
]
}
]
},
// 場景二：內功
innerPower: {
background: '/images/cave.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: '讓我們先打坐冥想，修煉內功。',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: '好的，姑姑。',
position: Position.LEFT
},
// 下一個場景
{
text: '（兩人開始打坐）',
next: 'ending'
}
]
},
// 場景三：劍法
swordSkills: {
background: '/images/grassland.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: '拿起你的劍，讓我們練習劍法。',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: '遵命，姑姑。',
position: Position.LEFT
},
// 下一個場景
{
text: '（兩人開始練劍）',
next: 'ending'
}
]
},
// 結束場景
ending: {
background: '/images/sunset.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: '今天的練習到此為止。',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: '謝謝姑姑指導。',
position: Position.LEFT
}
// 沒有next，對話結束
]
}
};
import React from 'react';
import { ReactDialogic } from 'react-dialogic';
import 'react-dialogic/dist/styles.css';
function App() {
// 事件處理函數
const handleMessageStart = (item) => {
console.log('對話開始:', item);
// 可以觸發音效、動畫或更新遊戲狀態
};
const handleMessage = (item) => {
console.log('對話進行中:', item);
// 可以記錄玩家選擇、更新變數等
};
const handleMessageEnd = (item) => {
console.log('對話結束:', item);
// 可以返回遊戲主流程或觸發後續事件
};
return (
<div className="app">
<ReactDialogic
characters={characters}
dialogue={dialogue}
startScene="start"
onMessageStart={handleMessageStart}
onMessage={handleMessage}
onMessageEnd={handleMessageEnd}
/>
</div>
);
}
export default App;
如果您使用Webpack等打包工具，可以直接引入本地圖片：
import yangGuoImg from './images/yangGuo.png';
import xiaoLongNvImg from './images/xiaoLongNv.png';
import blindfoldedImg from './images/xiaoLongNv-blindfolded.png';
import grasslandBg from './images/grassland.png';
import caveBg from './images/cave.png';
import sunsetBg from './images/sunset.png';
// 角色配置
const characters = {
yangGuo: {
name: '楊過',
images: {
default: yangGuoImg
},
// ...其他設定
},
xiaoLongNv: {
name: '小龍女',
images: {
default: xiaoLongNvImg,
blindfolded: blindfoldedImg
},
// ...其他設定
}
};
// 對話配置
const dialogue = {
start: {
background: grasslandBg,
// ...序列
},
// ...其他場景
};
React Dialogic 使用 CSS 變量來控制組件的外觀。您可以通過以下方式自定義主題：
在您的 CSS 中覆蓋預設變量：
/* 覆蓋預設值 */
:root {
--dialogic-dialog-bg: rgba(255, 255, 255, 0.9);
--dialogic-dialog-border: #FF5500;
--dialogic-dialog-text: #333333;
--dialogic-name-text: #FF5500;
}
您可以創建自己的主題類：
/* 自定義主題 */
.theme-fantasy {
--dialogic-dialog-bg: rgba(64, 41, 93, 0.85);
--dialogic-dialog-border: #9951FF;
--dialogic-dialog-text: #FFFFFF;
--dialogic-name-text: #FFD700;
--dialogic-choice-bg: rgba(64, 41, 93, 0.7);
--dialogic-choice-bg-hover: rgba(153, 81, 255, 0.3);
--dialogic-choice-text: #FFFFFF;
--dialogic-choice-text-hover: #FFD700;
--dialogic-font-dialog: 'Tangerine', cursive;
--dialogic-font-choice: 'Tangerine', cursive;
--dialogic-typewriter-speed: 35ms;
--dialogic-dialog-radius: 12px;
--dialogic-choice-radius: 8px;
}
以下是可用的 CSS 變量及其用途：
| 變量名 | 說明 | 預設值 |
|---|---|---|
--dialogic-dialog-bg | 對話框背景色 | rgba(0, 0, 0, 0.8) |
--dialogic-dialog-border | 對話框邊框顏色 | #FFCC00 |
--dialogic-dialog-text | 對話文本顏色 | #FFFFFF |
--dialogic-name-text | 角色名稱顏色 | #FFCC00 |
--dialogic-choice-bg | 選項背景色 | rgba(0, 0, 0, 0.7) |
--dialogic-choice-bg-hover | 選項懸停背景色 | rgba(255, 204, 0, 0.3) |
--dialogic-choice-text | 選項文本顏色 | #FFFFFF |
--dialogic-choice-text-hover | 選項懸停文本顏色 | #FFCC00 |
--dialogic-font-dialog | 對話框字體 | 'Press Start 2P', system-ui, sans-serif |
--dialogic-font-choice | 選項字體 | 'Press Start 2P', system-ui, sans-serif |
--dialogic-typewriter-speed | 打字效果速度 | 40ms |
--dialogic-dialog-radius | 對話框圓角半徑 | 4px |
--dialogic-choice-radius | 選項圓角半徑 | 2px |
React-Dialogic 特別適合以下應用場景：
import { ReactDialogic } from 'react-dialogic';
// Important: import styles
import 'react-dialogic/dist/styles.css';
// Define position constants (optional)
const Position = {
LEFT: 'left',
RIGHT: 'right',
CENTER: 'center'
};
// Character configuration
const characters = {
yangGuo: {
name: 'Yang Guo',
images: {
default: '/images/yangGuo.png'
},
textColor: '#3a86ff',
defaultPosition: Position.LEFT
},
xiaoLongNv: {
name: 'Xiao Long Nv',
images: {
default: '/images/xiaoLongNv.png',
blindfolded: '/images/xiaoLongNv-blindfolded.png'
},
textColor: '#8338ec',
defaultPosition: Position.RIGHT
}
};
// Dialogue configuration
const dialogue = {
// Scene One: Start
start: {
background: '/images/grassland.png',
sequence: [
// Character dialogue
{
speaker: 'yangGuo',
text: 'Aunt, what martial arts are we practicing today?',
position: Position.LEFT
},
{
speaker: 'xiaoLongNv',
text: 'We will practice the Jade Maiden Heart Sutra today.',
position: Position.RIGHT
},
// Narration - no character specified
{
text: '(They arrive at the training ground)'
},
// Choice branch
{
speaker: 'xiaoLongNv',
text: 'Which part would you like to practice first?',
choices: [
{ text: 'Inner Power Techniques', next: 'innerPower' },
{ text: 'Sword Skills', next: 'swordSkills' }
]
}
]
},
// Scene Two: Inner Power
innerPower: {
background: '/images/cave.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: 'Let us meditate first to cultivate inner power.',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: 'Yes, Aunt.',
position: Position.LEFT
},
// Next scene
{
text: '(They begin to meditate)',
next: 'ending'
}
]
},
// Scene Three: Sword Skills
swordSkills: {
background: '/images/grassland.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: 'Take your sword, let us practice sword techniques.',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: 'As you command, Aunt.',
position: Position.LEFT
},
// Next scene
{
text: '(They begin sword practice)',
next: 'ending'
}
]
},
// Ending Scene
ending: {
background: '/images/sunset.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: 'That concludes our training for today.',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: 'Thank you for your guidance, Aunt.',
position: Position.LEFT
}
// No next, dialogue ends
]
}
};
import React from 'react';
import { ReactDialogic } from 'react-dialogic';
import 'react-dialogic/dist/styles.css';
function App() {
// Event handler functions
const handleMessageStart = (item) => {
console.log('Dialogue started:', item);
// Can trigger sound effects, animations, or update game state
};
const handleMessage = (item) => {
console.log('Dialogue in progress:', item);
// Can record player choices, update variables, etc.
};
const handleMessageEnd = (item) => {
console.log('Dialogue ended:', item);
// Can return to game main flow or trigger subsequent events
};
return (
<div className="app">
<ReactDialogic
characters={characters}
dialogue={dialogue}
startScene="start"
onMessageStart={handleMessageStart}
onMessage={handleMessage}
onMessageEnd={handleMessageEnd}
/>
</div>
);
}
export default App;
If you're using bundlers like Webpack, you can import local images directly:
import yangGuoImg from './images/yangGuo.png';
import xiaoLongNvImg from './images/xiaoLongNv.png';
import blindfoldedImg from './images/xiaoLongNv-blindfolded.png';
import grasslandBg from './images/grassland.png';
import caveBg from './images/cave.png';
import sunsetBg from './images/sunset.png';
// Character configuration
const characters = {
yangGuo: {
name: 'Yang Guo',
images: {
default: yangGuoImg
},
// ...other settings
},
xiaoLongNv: {
name: 'Xiao Long Nv',
images: {
default: xiaoLongNvImg,
blindfolded: blindfoldedImg
},
// ...other settings
}
};
// Dialogue configuration
const dialogue = {
start: {
background: grasslandBg,
// ...sequence
},
// ...other scenes
};
React Dialogic uses CSS variables to control component appearance. You can customize themes in the following ways:
Override default variables in your CSS:
/* Override defaults */
:root {
--dialogic-dialog-bg: rgba(255, 255, 255, 0.9);
--dialogic-dialog-border: #FF5500;
--dialogic-dialog-text: #333333;
--dialogic-name-text: #FF5500;
}
You can create your own theme classes:
/* Custom theme */
.theme-fantasy {
--dialogic-dialog-bg: rgba(64, 41, 93, 0.85);
--dialogic-dialog-border: #9951FF;
--dialogic-dialog-text: #FFFFFF;
--dialogic-name-text: #FFD700;
--dialogic-choice-bg: rgba(64, 41, 93, 0.7);
--dialogic-choice-bg-hover: rgba(153, 81, 255, 0.3);
--dialogic-choice-text: #FFFFFF;
--dialogic-choice-text-hover: #FFD700;
--dialogic-font-dialog: 'Tangerine', cursive;
--dialogic-font-choice: 'Tangerine', cursive;
--dialogic-typewriter-speed: 35ms;
--dialogic-dialog-radius: 12px;
--dialogic-choice-radius: 8px;
}
Here are the available CSS variables and their purposes:
| Variable Name | Description | Default Value |
|---|---|---|
--dialogic-dialog-bg | Dialog box background color | rgba(0, 0, 0, 0.8) |
--dialogic-dialog-border | Dialog box border color | #FFCC00 |
--dialogic-dialog-text | Dialog text color | #FFFFFF |
--dialogic-name-text | Character name color | #FFCC00 |
--dialogic-choice-bg | Choice option background color | rgba(0, 0, 0, 0.7) |
--dialogic-choice-bg-hover | Choice option hover background color | rgba(255, 204, 0, 0.3) |
--dialogic-choice-text | Choice option text color | #FFFFFF |
--dialogic-choice-text-hover | Choice option hover text color | #FFCC00 |
--dialogic-font-dialog | Dialog box font | 'Press Start 2P', system-ui, sans-serif |
--dialogic-font-choice | Choice option font | 'Press Start 2P', system-ui, sans-serif |
--dialogic-typewriter-speed | Typewriter effect speed | 40ms |
--dialogic-dialog-radius | Dialog box border radius | 4px |
--dialogic-choice-radius | Choice option border radius | 2px |
React-Dialogic is particularly well-suited for:
FAQs
A React UI library for creating dialogue systems with a game-like interface | 一個專為 React 應用開發的對話系統 UI 套件，提供類遊戲風格的對話介面
The npm package react-dialogic receives a total of 3 weekly downloads. As such, react-dialogic popularity was classified as not popular.
We found that react-dialogic demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The remediated findings include organization permission bugs, stale project access after transfers, OIDC replay edge cases, audit logging gaps, and an IDOR in API token deletion.
Research
/Security News
GitHub account BufferZoneCorp published sleeper packages that later added credential theft, GitHub Actions tampering, fake go wrappers, and SSH persistence.
Research
/Security News
Socket found a malicious Intercom PHP package on Packagist using Composer plugin execution to steal credentials and spread across ecosystems.