react-dialogic
Advanced tools
一個專為 React 應用開發的對話系統 UI 套件
A dialogue system UI kit for React applications
React-Dialogic 旨在提供一個易於集成且功能豐富的對話系統，可用於：
onMessageStart - 對話節點開始時觸發onMessage - 對話節點結束時觸發onMessageEnd - 對話流結束時觸發（無next屬性時）npm install react-dialogic
# 或
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 aims to provide an easy-to-integrate and feature-rich dialogue system for:
onMessageStart - Triggered when a dialogue node beginsonMessage - Triggered when a dialogue node endsonMessageEnd - Triggered when the dialogue flow ends (when no next property is present)npm install react-dialogic
# or
yarn add 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: 'Master, what skills shall we practice today?',
position: Position.LEFT
},
{
speaker: 'xiaoLongNv',
text: 'Today we will practice the Jade Maiden Heart Sutra.',
position: Position.RIGHT
},
// Narration - no character specified
{
text: '(The two arrived at the training area)'
},
// Choice branch
{
speaker: 'xiaoLongNv',
text: 'Which part would you like to practice first?',
choices: [
{ text: 'Inner power cultivation', next: 'innerPower' },
{ text: 'Sword techniques', next: 'swordSkills' }
]
}
]
},
// Scene Two: Inner Power
innerPower: {
background: '/images/cave.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: 'Let us sit in meditation to cultivate inner power.',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: 'Yes, master.',
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 and let us practice sword techniques.',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: 'As you command, master.',
position: Position.LEFT
},
// Next scene
{
text: '(They begin sword practice)',
next: 'ending'
}
]
},
// Ending Scene
ending: {
background: '/images/sunset.png',
sequence: [
{
speaker: 'xiaoLongNv',
text: 'That\'s enough practice for today.',
position: Position.RIGHT
},
{
speaker: 'yangGuo',
text: 'Thank you for your guidance, master.',
position: Position.LEFT
}
// No next property, dialogue ends
]
}
};
import React from 'react';
import { ReactDialogic } from 'react-dialogic';
import 'react-dialogic/dist/styles.css';
function App() {
// Event handlers
const handleMessageStart = (item) => {
console.log('Dialogue start:', 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 end:', item);
// Can return to main game 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 the appearance of components. You can customize the theme 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 background color | rgba(0, 0, 0, 0.8) |
--dialogic-dialog-border | Dialog border color | #FFCC00 |
--dialogic-dialog-text | Dialog text color | #FFFFFF |
--dialogic-name-text | Character name color | #FFCC00 |
--dialogic-choice-bg | Choice background color | rgba(0, 0, 0, 0.7) |
--dialogic-choice-bg-hover | Choice hover background color | rgba(255, 204, 0, 0.3) |
--dialogic-choice-text | Choice text color | #FFFFFF |
--dialogic-choice-text-hover | Choice hover text color | #FFCC00 |
--dialogic-font-dialog | Dialog font | 'Press Start 2P', system-ui, sans-serif |
--dialogic-font-choice | Choice font | 'Press Start 2P', system-ui, sans-serif |
--dialogic-typewriter-speed | Typewriter effect speed | 40ms |
--dialogic-dialog-radius | Dialog border radius | 4px |
--dialogic-choice-radius | Choice border radius | 2px |
MIT
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 55 weekly downloads. As such, react-dialogic popularity was classified as not popular.
We found that react-dialogic demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.