https://github.com/remixz/react-fiction
An interactive fiction framework for React.
https://github.com/remixz/react-fiction
Last synced: 2 months ago
JSON representation
An interactive fiction framework for React.
- Host: GitHub
- URL: https://github.com/remixz/react-fiction
- Owner: remixz
- License: mit
- Created: 2015-09-27T23:50:42.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-09-28T20:55:25.000Z (over 9 years ago)
- Last Synced: 2025-04-13T01:13:06.747Z (2 months ago)
- Language: JavaScript
- Homepage: http://react-fiction.bruggie.com
- Size: 136 KB
- Stars: 21
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-fiction
A interactive fiction framework for React.
## Installation
```bash
npm install react-fiction --save
```
## Example
See the [documentation](/docs/Usage.md) for full usage details.
```js
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 (
)
}
}
class DarkRoom extends Component {
static contextTypes = {
story: ContextTypes.StoryDataShape
}
render () {
let { story } = this.context
return (
{story.data.turnedOnLight ? 'The room is dark again.' : 'You are in a dark room.'}
Turn on light
)
}
}
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 (
The room is now illuminated. You have turned on this light {room.data.visited} times.
Turn off light
)
}
}
render(, document.getElementById('root'))
```