Narrative

Narrative

The narrative is a great presentational component for displaying images and short bits of text in a slider like manner.

Props

The props needed for this component are listed and explained below:

• onChange - This prop must be a function

• stage - This prop must be a number

• items - This prop must be a object with the given keys and values shown below in the example.

Example

<Narrative
	onChange={this.onChange}
	stage={this.state.stage}
	items={[
		{
			title: "Narrative Item title 1",
			body: "All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.",
			itemIndex: 0,
			_graphic: {
				src: "http://placekitten.com/g/1024/300"
			}
		},
		{
			title: "Narrative Item title 2",
			body: "All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.",
			itemIndex: 1,
			_graphic: {
				src: "http://placekitten.com/g/1024/300"
			}
		},
		{
			title: "Narrative Item title 3",
			body: "All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.",
			itemIndex: 2,
			_graphic: {
				src: "http://placekitten.com/g/1024/300"
			}
		}
	]}
/>
// ...React Component
getInitialState: function() {
    return {
        stage: 0
    }
},

onChange: function(stage) {
    this.setState({
        stage: stage
    });
},

Related

• Tabs