ReactJS Instragram Feed

Developer
Kyle Houston
Size
4,396 Kb
Views
26,312
  1. ReactJS Instragram Feed Previews
  2. ReactJS Instragram Feed HTML Codes
  3. ReactJS Instragram Feed CSS Codes
  4. ReactJS Instragram Feed JS Codes

How do I make an reactjs instragram feed?

What is a reactjs instragram feed? How do you make a reactjs instragram feed? This script and codes were developed by Kyle Houston on 25 August 2022, Thursday.

ReactJS Instragram Feed Previews
IQ Test

ReactJS Instragram Feed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ReactJS Instragram Feed</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="insta-ctn js-insta-ctn"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://codepen.io/chriscoyier/pen/yIgqi.js'></script>
<script src='http://fb.me/react-0.11.1.js'></script>
<script src='http://fb.me/JSXTransformer-0.11.0.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ReactJS Instragram Feed - Script Codes CSS Codes

@import url("http://fonts.googleapis.com/css?family=Lato:400,700");
* { padding: 0; margin: 0; box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { font-family: Lato; font-size: 1.6rem; line-height: 1.6; color: #1c1c1c; font-smoothing: antialiased; background: #2196f3;
}
svg { overflow: hidden; vertical-align: middle; position: relative; top: -1px; box-sizing: content-box; pointer-events: none;
}
ul,
li { margin: 0;
}
li { list-style: none;
}
a { text-decoration: none; color: #1c1c1c;
}
.m-insta { width: 300px; display: block; vertical-align: top; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); margin: 10px; position: relative; /*.no-touch & { opacity: 0; transition: opacity 1.7s $easeInOutQuint, transform 1.2s $easeInOutQuint; transform: translate(0, 80px); &:hover { .insta-img { transform: scale(1.1); } } }*/
}
.m-insta .insta-img-ctn { width: 300px; height: 300px; overflow: hidden;
}
.m-insta .insta-img { display: block; -webkit-transform: scale(1); transform: scale(1); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 1.8s; transition: -webkit-transform 1.8s; transition: transform 1.8s; transition: transform 1.8s, -webkit-transform 1.8s;
}
.m-insta .insta-content { padding: 15px; background: white;
}
.m-insta .insta-likes { background: #34495E; color: white; position: absolute; top: 0; right: 0; font-size: 15px; padding: 2px 10px;
}
.m-insta .insta-text { word-wrap: break-word;
}
.m-insta .insta-user { margin-top: 13px; text-align: right;
}
.insta-ctn { height: 100%;
}
.no-touch .insta-ctn .m-insta.is-ready { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.no-touch .insta-ctn .m-insta.is-ready:nth-child(1) { -webkit-transition-delay: 0.17s; transition-delay: 0.17s;
}
.no-touch .insta-ctn .m-insta.is-ready:nth-child(2) { -webkit-transition-delay: 0.34s; transition-delay: 0.34s;
}
.no-touch .insta-ctn .m-insta.is-ready:nth-child(3) { -webkit-transition-delay: 0.51s; transition-delay: 0.51s;
}
.no-touch .insta-ctn .m-insta.is-ready:nth-child(4) { -webkit-transition-delay: 0.68s; transition-delay: 0.68s;
}
.no-touch .insta-ctn .m-insta.is-ready:nth-child(5) { -webkit-transition-delay: 0.85s; transition-delay: 0.85s;
}

ReactJS Instragram Feed - Script Codes JS Codes

/** @jsx React.DOM */
console.clear();
/** *	TODOS *	Trans in/out on each poll *	Video Check *	Add favourite? *	Instead of flushing DOM concat? *	Sticky posts? *	Scroll to top *	Pull refresh */
(function() {
var instaCtn = document.querySelector('.js-insta-ctn');
var InstagramFeed = React.createClass({	getInitialState: function() {	return {images: []};	},	fetchData: function() {	$.ajax({	url: this.props.source, type: "GET", dataType: "jsonp", }).done(function(response) {	// Make data object	var responseData = response.data.map(function(img){	return {	id: img.id,	url: img.link,	src: img.images.low_resolution.url,	desc: img.caption ? img.caption.text : '',	likes: img.likes.count,	user: img.user.username	};	});	this.setState({	images: responseData	}); }.bind(this));	},	componentDidMount: function() {	this.fetchData();	setInterval(this.fetchData, this.props.polling);	},	render: function() {	var instaImages = this.state.images.map(function(img) {	return <InstagramPost	url={img.url}	src={img.src}	desc={img.desc}	likes={img.likes}	user={img.user} />	});	return (	<div>	{instaImages}	</div>	)	},	componentDidUpdate: function() {	console.log('running masonry');	var masonryCtn = new Masonry( instaCtn.querySelector('div'), {	transitionDuration: 0	});	}
});
var InstagramPost = React.createClass({	getInitialState: function() {	return {};	},	render: function() {	return (	<a href={this.props.url} className="m-insta js-insta" target="_blank">	<div className="insta-img-ctn">	<img src={this.props.src} alt="" className="insta-img" />	<span className="insta-likes">{this.props.likes}</span>	</div>	<div className="insta-content">	<p className="insta-text">{this.props.desc}</p>	<p className="insta-user">@{this.props.user}</p>	</div>	</a>	)	}
});
React.renderComponent(	<InstagramFeed source="https://api.instagram.com/v1/media/popular/?access_token=1227236256.5c53f4a.77d8b85884924c3aa5027e2252e4e80a" polling="10000" />,	instaCtn
);
})();
ReactJS Instragram Feed - Script Codes
ReactJS Instragram Feed - Script Codes
Home Page Home
Developer Kyle Houston
Username styler
Uploaded August 25, 2022
Rating 3
Size 4,396 Kb
Views 26,312
Do you need developer help for ReactJS Instragram Feed?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Houston (styler) Script Codes
Name
Flexbox thumbnail grid
Floating Material Input
Meet the team
A Pen by Kyle Houston
Loader Animation
Material Design Ripple Button
Dropdown Navigation
Movie App - Detailed View - Adding a watchlist button - RESOLVED
Velocity Rotate Test
Circle border hover effect
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!