Name: scrollyteller
Owner: ABC News
Description: A React component for creating scrollyteller stories
Created: 2018-01-09 05:14:01.0
Updated: 2018-01-19 01:20:42.0
Pushed: 2018-01-09 05:31:43.0
Homepage: null
Size: 165
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A scrollyteller component for React
The scrollyteller takes a series of panels of content nodes and turns them into piecemeal boxes.
The panels prop is in the format of:
[
{
config: {
info: 'Some kind of config that is given when this marker is active'
},
nodes: [
...DOM elements for this panel...
]
},
{
config: {
thing: 'This will be given when the second marker is hit'
},
nodes: [
...DOM elements for this panel...
]
}
]
When a new box comes into view onMarker will be called with the config of the incoming panel.
Example:
t React = require('react');
t Scrollyteller = require('scrollyteller');
ome kind of dockable visualisation that goes with the scrolling text
t GraphicOfSomeKind = require('./GraphicOfSomeKind');
s Story extends React.Component {
nstructor(props) {
super(props);
this.state = {
property: ''
};
nder() {
// Content is loaded somehow into an array of { marker: {...}, nodes: [...DOMNodes] }
const panels = ...?
return (
<Scrollyteller panels={panels} onMarker={config => this.setState(state => ({ property: config.thing }))}>
<GraphicOfSomeKind property={this.state.property} />
</Scrollyteller>
);
le.exports = Story;
The Scrollyteller can also takes a panelClassName prop which it will pass to each panel component for customising the look.
To completely customise how panels are rendered you can pass in panelComponent. This should be a React class component (not a stateless component) and must call props.reference(<DOMNode>) with a valid DOM node (usually the base ref of a given panel). This is needed for detecting marker scroll positions when navigating the scrollyteller.