componentDidMount() {
this.storiesApi = new Zuck(this.storiesElement, {
paginationArrows: false,
skin: 'snapgram', // container class
avatars: true, // shows user photo instead of last story item preview
list: false, // displays a timeline instead of carousel
openEffect: true, // enables effect when opening story
cubeEffect: false, // enables the 3d cube effect when sliding story
autoFullScreen: false, // enables fullscreen on mobile browsers
backButton: true, // adds a back button to close the story viewer
backNative: false, // uses window history to enable back button on browsers/android
previousTap: true, // use 1/3 of the screen to navigate to previous item when tap the story
localStorage: true, // set true to save "seen" position. Element must have a id to save properly.
reactive: true, // set true if you use frameworks like React to control the timeline (see react.sample.html)
rtl: false,
callbacks: {
onDataUpdate: function (currentState, callback) {
this.setState(state => {
state.stories = currentState;
this is my code //
import React from 'react'; import Zuck from "zuck.js"
import './App.css';
class App extends React.Component { constructor(props) { super(props);
}
componentDidMount() { this.storiesApi = new Zuck(this.storiesElement, { paginationArrows: false, skin: 'snapgram', // container class avatars: true, // shows user photo instead of last story item preview list: false, // displays a timeline instead of carousel openEffect: true, // enables effect when opening story cubeEffect: false, // enables the 3d cube effect when sliding story autoFullScreen: false, // enables fullscreen on mobile browsers backButton: true, // adds a back button to close the story viewer backNative: false, // uses window history to enable back button on browsers/android previousTap: true, // use 1/3 of the screen to navigate to previous item when tap the story localStorage: true, // set true to save "seen" position. Element must have a id to save properly. reactive: true, // set true if you use frameworks like React to control the timeline (see react.sample.html) rtl: false, callbacks: { onDataUpdate: function (currentState, callback) { this.setState(state => { state.stories = currentState;
}
render() { const timelineItems = []
} } export default App;