https://github.com/utilfirst/react-visual-novel

React library for building web-based visual novels
https://github.com/utilfirst/react-visual-novel

framer-motion react tailwindcss typescript visual-novel

Last synced: 3 months ago
JSON representation

React library for building web-based visual novels

• Host: GitHub
• URL: https://github.com/utilfirst/react-visual-novel
• Owner: utilfirst
• License: mit
• Created: 2022-10-19T12:47:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-28T05:55:57.000Z (over 2 years ago)
• Last Synced: 2024-10-30T00:05:37.788Z (3 months ago)
• Topics: framer-motion, react, tailwindcss, typescript, visual-novel
• Language: TypeScript
• Homepage: https://heritage-novel.com/play
• Size: 214 KB
• Stars: 17
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-visual-novel

[![Latest release](https://img.shields.io/npm/v/react-visual-novel.svg)](https://www.npmjs.org/package/react-visual-novel)

[![License](https://img.shields.io/npm/l/react-visual-novel.svg)](https://www.npmjs.org/package/react-visual-novel)

Build visual novels using web technologies. Powered by [React](https://reactjs.org/), [Tailwind CSS](https://tailwindcss.com/), [Framer Motion](https://www.framer.com/motion/), and [howler.js](https://github.com/goldfire/howler.js).

## Installation

This package requires some peer dependencies, which you need to install by yourself.

```shell

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](https://github.com/yenbekbay/archcode-heritage-novel).

```tsx

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 (

    

      

      Welcome to react-visual-novel!

    

  )

}

const branches = prepareBranches({BranchIntro})

type MyBranches = typeof branches

declare module 'react-visual-novel' {

  interface Branches extends MyBranches {}

}

export default function MyGame() {

  return (

    


      

    

  )

}

```


## 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](./LICENSE) © Utility First