Hi Guys today, I gonna show you how you can make sidebar using reactjs + json + TweenMax,
You can view how works that and how create your own props inside in this sample you can check this, you can review this sample in this link https://labs.leoreyesdev.com/menu-json-reactjs/
Steps for create the project
[cc lang=”javascript”]
// Install reactjs on your machine sudo npm install -g create-react-app
// create-react-app menu-users
// cd menu-users
[/cc]
Create props
[cc lang=”javascript”]
import React, { Component } from ‘react’;
import ‘./../css/App.css’;
class UserScreen extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
// [ USER SCREEN USER ======================================== ♛ ]
render() {
return(
{this.props.title}
)
}
}
export default UserScreen;
[/cc]
You can pass and filled this props when u call your component like this sample checkout in line 179 you can view how put your component from UserScreen.js class and putted this inside to my SideBar.js class and pass this other properties
thumbnail={this.state.singlePost.thumbnail}
authorPost={this.state.singlePost.authorPost}
title={this.state.singlePost.title}
previosly setting from UserScreen.js class.
Pass props to </ UserScreen> component
[cc lang=”javascript”]
import React, { Component } from ‘react’;
import ‘./../css/App.css’;
import dataJson from ‘./../data/top.json’
import UserScreen from ‘./UserScreen’
import { TweenMax } from ‘gsap’
class SideBar extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
postDiv: [],
author:”,
erasePost:”,
posts: dataJson.data.children,
firstPost: dataJson.data.children[0],
singlePost:{
id:”,
title:”,
authorPost:”,
thumbnail:”
}
}
}
componentDidMount() {
//load Last
this.loadFirstPost()
this.closeNav()
}
/* [Load first Post in div ========================================== ♛ */
loadFirstPost(){
let title = this.state.firstPost.data.title
let author = this.state.firstPost.data.author
let thumbnail = this.state.firstPost.data.thumbnail
this.setState({
singlePost: {
id:”,
title:title,
authorPost:author,
thumbnail:thumbnail
}
})
}
/* [Click for load post inother div ================================== ♛ */
handleClick(e,t,a,divId){
this.setState({
singlePost: {
id:divId,
title:e,
authorPost:t,
thumbnail:a
}
})
console.log(” [—– POST —–] “, this.state.singlePost)
}
/* [Delete Posts in SideBar ========================================= ♛ */
dismissClick(id,e){
console.log(“ID: “,e.target.value,”ERASE: “, this.state.erasePost)
let myDiv = “post” + e.target.value
document.getElementById(myDiv).style.display=”none”
this.clearPost()
}
/* [Delete Posts in SideBar ========================================= ♛ */
clearPost(){
console.log(‘clear’)
this.setState({
singlePost: {
id:”,
title:”,
authorPost:”,
thumbnail:”
}
})
}
/* [OPEN SIDE BAR ================================================== ♛ */
openNav(){
document.getElementById(‘mySidenav’).style.width = “330px”;
console.log(“OpenMenu”)
let barMenu = document.getElementById(“barTitle”)
barMenu.style.display = “block”
barMenu.style.opacity = 0;
TweenMax.to(barMenu, 0.5, {opacity:1, delay:0.3})
TweenMax.to(‘#allContent’, 0.3, {opacity:1})
let itemsPosts
let post
let num = 0.1
itemsPosts = this.state.posts
for( let i=0; i<itemsPosts.length; i++){ post = ‘post’ + i document.getElementById(post).style.opacity = 0 let postIdDiv = ‘#’ + post num += 0.08 TweenMax.to(postIdDiv, 0.5, {opacity:1, delay:num}) console.log(‘TOTAL POSTS >>>>>>’, postIdDiv)
console.log(‘Number’, num)
}
}
closeNav() {
document.getElementById(“mySidenav”).style.width = “0”;
TweenMax.to(‘#barTitle’, 0.1, {opacity:0, onComplete:noneDisplay})
TweenMax.to(‘#allContent’, 0.3, {opacity:0})
function noneDisplay(){
document.getElementById(“barTitle”).style.display = “none”;
}
}
/* [OPEN SIDE BAR ================================================== ♛ */
render() {
return(
)
}
}
export default SideBar;
[/cc]
you can download and run the project in this link from github
https://github.com/LeoReyesDev/reactjs-labs
