AFrame React Stories
A plug and play react UI module that lets you quickly add social media style stories into your current VR project. Click here to see the demo.
Using npm or yarn:
$ npm i --save aframe-react-storiesor$ yarn add aframe-react-stories
Each profile should to be formatted as shown below
displayName: 'John'img_url: ''stories:type: 'image/jpeg'src: ''type: 'video/mp4'src: ''
The aframe-react-stories component takes in a user prop and friends prop. The user prop should be a single profile and the friends prop should be a list of profiles.
Pictures will need to be specified with the type, 'image/jpeg', 'image/png', 'image', etc..., in order for aframe-react-stories to display the media in the
img tag under assets. Otherwise, all other types will default to playing in the
The aframe-react-stories component takes in a callback function through the
assetsCallback prop. Once mounted, the aframe-react-stories component will run a process that tags all the video and image assets for the stories playback logic. It will then pass the processed assets into callback function in the
assetsCallback once it's done. The list of assets returned needs to be saved inside
<a-assets> tag for the component to work properly.
This callback is invoked every time a story is played. It should take in an object that contains the current story and metadata.
|autoPlayNext||Autoplay the next friend's story when current friend's stories end||false||boolean|
|autoPlayStart||Autoplay the first friend's story when loaded||false||boolean|
|defaultDuration||Duration for showing pictures||7000||number|
|exitCallback||Gets called when exit button is clicked||callback function|
|assetsCallback||Gets called when initiated. A list of assets to be saved inside
|viewCallback||Invoked when a story is played. An object with the relevant video data and metadata is passed in||callback function|
|user||This profile will show at the beginning of stories||profile|
|friends||These are list of profiles to show stories of for each user||array of objects|
Running the tests
Using npm or yarn:
yarn run testnpm run test
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
This project is licensed under the MIT License - see the LICENSE.md file for details