react-visual-novel
Build visual novels using web technologies. Powered by React, Tailwind CSS, Framer Motion, and howler.js.
Installation
This package requires some peer dependencies, which you need to install by yourself.
npm install react-visual-novel howler use-query-params
Quickstart
This is only a very basic usage example of react-visual-novel. To see everything that is possible with the library, please refer to a production demo.
import * as assets from 'assets'
import {bgSolidJpg} from 'assets'
import {Branch, Game, prepareBranches, Say, Scene} from 'react-visual-novel'
import 'react-visual-novel/dist/index.css'
function BranchIntro() {
return (
<Branch>
<Scene src={bgSolidJpg.src} />
<Say>Welcome to react-visual-novel!</Say>
</Branch>
)
}
const branches = prepareBranches({BranchIntro})
type MyBranches = typeof branches
declare module 'react-visual-novel' {
interface Branches extends MyBranches {}
}
export default function MyGame() {
return (
<div style={{display: 'flex', width: '100vw', height: '100vh'}}>
<Game assets={assets} branches={branches} initialBranchId="Intro" />
</div>
)
}
Development
Before you can start developing, please make sure that you have pnpm installed (npm install -g pnpm). Then install the dependencies using pnpm: pnpm install.
For local development, you can use pnpm dev.
License
MIT License © Utility First
75 Aug 11, 2022
4 Sep 14, 2022
3.7k Jan 1, 2023
12 Mar 29, 2022
1.5k Jan 6, 2023
6.4k Dec 31, 2022
15 Sep 26, 2022
140 Dec 25, 2022
342 Dec 24, 2022
24.7k Jan 1, 2023
294 Dec 2, 2022
11 Dec 31, 2022
48 Dec 27, 2022
354 Oct 27, 2022
6 Oct 19, 2022
609 Dec 31, 2022
8 Dec 16, 2022
1 May 8, 2022