react-fiction's Introduction

react-fiction

A interactive fiction framework for React.

Installation

npm install react-fiction --save

Example

See the documentation for full usage details.

import React, { Component } from 'react'
import { render } from 'react-dom'

import {
  Story, Viewer, Rooms, Room, Passage, Link, RoomTitle, RoomComponent, ContextTypes
} from 'react-fiction'

import 'react-fiction/styles/default.css'

class Example extends Component {
  render () {
    return (
      <Story>
        <Rooms>
          <Room start id='room-1' title='Lab' component={DarkRoom} />
          <Room id='room-2' title='Lab' component={LightRoom} />
        </Rooms>

        <Viewer>
          <RoomTitle />
          <RoomComponent />
        </Viewer>
      </Story>
    )
  }
}

class DarkRoom extends Component {
  static contextTypes = {
    story: ContextTypes.StoryDataShape
  }

  render () {
    let { story } = this.context

    return (
      <div>
        <Passage>
          {story.data.turnedOnLight ? 'The room is dark again.' : 'You are in a dark room.'}
        </Passage>

        <Link to='room-2'> Turn on light </Link>
      </div>
    )
  }
}

class LightRoom extends Component {
  static contextTypes = {
    room: ContextTypes.RoomDataShape,
    story: ContextTypes.StoryDataShape
  }

  componentWillMount () {
    let { room, story } = this.context

    room.data.visited = (room.data.visited ? room.data.visited + 1 : 1)
    story.data.turnedOnLight = true

    room.updateData(room.data)
    story.updateData(story.data)
  }
  render () {
    let { room } = this.context
    return (
      <div>
        <Passage>
          The room is now illuminated. You have turned on this light {room.data.visited} times.
        </Passage>

        <Link to='room-1'> Turn off light </Link>
      </div>
    )
  }
}

render(<Example />, document.getElementById('root'))

Recommend Projects