I am unable to render properly the reddit embed for a post, for some reason, when the iframe generates, the height gets cut off. If I manually select the iframe from developer tools, and uncheck "height: auto" it resizes properly. I have no idea how to fix this or what might be causing this issue. Any help would be appreciated. Thank you.
import React from 'react';
export default class RedditEmbedComponent extends React.Component {
componentWillMount() {
const script = document.createElement("script");
script.src = "//embed.redditmedia.com/widgets/platform.js";
script.async = true;
document.body.appendChild(script);
}
renderFrame = () => {
return (
<div>
<blockquote class="reddit-card" data-card-created="1553892582">
<a href="https://www.reddit.com/r/science/comments/b6wjlb/a_billion_people_may_be_newly_exposed_to_diseases/">
A billion people may be newly exposed to diseases like dengue fever as world temperature rises by the end of the century because of global
warming, says a new study that examines temperature changes on a monthly basis across the world.</a> from
r/science</blockquote>
</div>
);
}
render() {
return (<div>
{this.renderFrame()}
</div>);
}
}
Related
class Headers extends React.Component {
render() {
const selected = this.props.selectedPane;
const headers = this.props.panes.map((pane, index) => {
const title = pane.title;
const klass = index === selected ? 'active' : '';
return (
<li
key={index}
className={klass}
onClick={() => this.props.onTabChosen(index)}>
{title}{' '}
</li>
);
});
return (
<ul className='tab-header'>
{headers}
</ul>
);
}
}
export default class Tabs extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedPane: 0
};
this.selectTab = this.selectTab.bind(this);
}
selectTab(num) {
this.setState({selectedPane: num});
}
render() {
const pane = this.props.panes[this.state.selectedPane];
return (
<div>
<h1>Tabs</h1>
<div className='tabs'>
<Headers
selectedPane={this.state.selectedPane}
//onTabChosen={this.selectTab}
panes={this.props.panes}>
</Headers>
<div className='tab-content'>
<article>
hellooooo
{pane.content}
</article>
</div>
</div>
</div>
);
}
}
I'm currently creating a 3 tab section where if you click on a tab, it gives you a new pane.
When looking at the render function I see a custom tag called Headers.
I know it coming from the Headers class at the beginning, but how does that format work? Is that a custom tag we building?
Also when looking at its properties such as onTabChosen, when it is deleted in the render method (for learning purposes) and I click on a selected tab, an error comes up saying
"_this.props.onTabChosen is not a function".
this.props.onTabChosen(index).. was written in the Headers class but not as a function correct?
I guess because I am also confused on how this.props.onTabChosen(index) works since onTabChosen was never declared anywhere, just input after props.
When looking at the render function I see a custom tag called "Headers".
That is not a custom tag. That is a React Component.
I know it coming from the Headers class at the beginning, but how does that format work?
Headers is either a function or a class (i.e. a constructor function).
The function will be called and the first argument passed to it will be an object with properties and values that match the props on the JSX element.
If you're going to use React then read a tutorial, this is very introductory level stuff for the framework.
It is covered very early on in both the MDN tutorial and the official React tutorial.
I guess because I am also confused on how this.props.onTabChosen(index) works since onTabChosen was never declared anywhere, just input after props.
It was declared, just not in the piece of code you shared.
I've managed to embed Google Calendar into a React component, but the problem is I could observe that the embedded calendar doesn't get the latest events that is added to the email that is authenticated with gapi.
The calendar iframe URL is this https://calendar.google.com/calendar/b/1/embed?src={VALID_CALENDAR_EMAIL}
calendar.util.js
const CALENDAR_EMBED_BASE_URL =
'https://calendar.google.com/calendar/embed?src=';
export const getCalendarEmbedUrl = email =>
`${CALENDAR_EMBED_BASE_URL}${email}`;
CalendarIframe.jsx component
import React, { PureComponent } from 'react';
import { getCalendarEmbedUrl } from 'calendar.util.js';
class CalendarIframe extends PureComponent {
render() {
const { email } = this.props;
const embedUrl = getCalendarEmbedUrl(email);
return (
<div className="calendarEmbedWrapper">
<iframe
title="Calendar"
id="calendarEmbed"
width="100%"
src={embedUrl}
/>
</div>
);
}
}
What's a way to ensure the embedded calendar is as dynamic as it should be?
I figured out how to solve the embedded calendars problem. In the embed string I just have to append all calendarIds into the string such that it would look like below:
https://calendar.google.com/calendar/embed?src=calendarID + &src=anotherCalendarId
https://calendar.google.com/calendar/embed?src=email#email.com&src=anothercalendar#group.calendar.google.com
It would show all events from multiple calendar ids embedded as such.
I'm attempting to do an animation with React and CSS classes. I have created a live demo, if you visit it and click the Start button you will see the text fade in and up one by one. This is the desired animation that I am after.
However, there seems to be issues of consistency when you hit Start multiple times and I cannot pinpoint why.
The Issue: Below is a recording of the issue, you can see the number 1 is not behaving as expected.
live demo
The process: Clicking Start will cancel any previous requestAnimationFrame' and will reset the state to it's initial form. It then calls the showSegments() function with a clean state that has no classNames attached to it.
This function then maps through the state adding a isActive to each segment in the state. We then render out the dom with a map and apply the new state.
This should create a smooth segmented animation as each class gets dropped one by one. However when i test this in Chrome (Version 56.0.2924.87 (64-bit)) and also on iOS, it is very inconsistent, sometimes it works perfectly, other times the first DOM element won't animate, it will just stay in up and visible it's completed transitioned state with "isActive".
I tried to replicate this issue in safari but it worked perfectly fine, I'm quite new to react so i am not sure if this is the best way to go about things, hopefully someone can offer some insight as to why this is behaving quite erratic!
/* MotionText.js */
import React, { Component } from 'react';
import shortid from 'shortid';
class MotionText extends Component {
constructor(props) {
super(props);
this.showSegments = this.showSegments.bind(this);
this.handleClickStart = this.handleClickStart.bind(this);
this.handleClickStop = this.handleClickStop.bind(this);
this.initialState = () => { return {
curIndex: 0,
textSegments: [
...'123456789123456789123456789123456789'
].map(segment => ({
segment,
id: shortid.generate(),
className: null
}))
}};
this.state = this.initialState();
}
handleClickStop() {
cancelAnimationFrame(this.rafId);
}
handleClickStart(){
cancelAnimationFrame(this.rafId);
this.setState(this.initialState(), () => {
this.rafId = requestAnimationFrame(this.showSegments);
});
}
showSegments() {
this.rafId = requestAnimationFrame(this.showSegments);
const newState = Object.assign({}, this.state);
newState.textSegments[this.state.curIndex].className = 'isActive';
this.setState(
{
...newState,
curIndex: this.state.curIndex + 1
},
() => {
if (this.state.curIndex >= this.state.textSegments.length) {
cancelAnimationFrame(this.rafId);
}
}
);
}
render(){
const innerTree = this.state.textSegments.map((obj, key) => (
<span key={obj.id} className={obj.className}>{obj.segment}</span>
));
return (
<div>
<button onClick={this.handleClickStart}>Start</button>
<button onClick={this.handleClickStop}>Stop</button>
<hr />
<div className="MotionText">{innerTree}..</div>
</div>
)
}
}
export default MotionText;
Thank you for your time, If there any questions please ask
WebpackBin Demo
Changing the method to something like this works
render(){
let d = new Date();
const innerTree = this.state.textSegments.map((obj, key) => (
<span key={d.getMilliseconds() + obj.id} className={obj.className}>{obj.segment}</span>
));
return (
<div>
<button onClick={this.handleClickStart}>Start</button>
<button onClick={this.handleClickStop}>Stop</button>
<hr />
<div className="MotionText">{innerTree}..</div>
</div>
)
}
How this helps is that, the key becomes different than previously assigned key to first span being rendered. Any way by which you can make the key different than previous will help you have this animation. Otherwise React will not render it again and hence you will never see this in animation.
I have a sub component that does not need to be loaded immediately that I want to split out. I am trying to conditionally load in a react component via require.ensure. I am not getting any console errors but I am also not seeing anything being loaded. Here is the code I am calling :
renderContentzones() {
if (this.props.display ) {
return require.ensure([], () => {
const Component = require('./content-zones/component.jsx').default;
return (
<Component
content={this.props.display}
/>
);
});
}
return null;
}
It is just rendering a blank screen currently (no errors). This previously worked when I used import 'displayComponent' from './content-zones/component.jsx' and just returned it like you normally would in react, instead of this require.ensure but. Not sure what I am doing wrong here, any idea how to make something like this work? Thanks!
This is one way to do it, using the state to show the dynamic loaded component:
constructor(){
this.state = {cmp:null};
}
addComponent() {
const ctx = this;
require.ensure(['../ZonesComponent'], function (require) {
const ZonesComponent = require('../ZonesComponent').default;
ctx.setState({cmp:<ZonesComponent />});
});
}
render(){
return (
<div>
<div>Some info</div>
<div><button onClick={this.addComponent.bind(this)}>Add</button></div>
<div>
{this.state.cmp}
</div>
</div>
);
}
When you press the button add the component will be shown.
Hope this help.
I want to use it for my website, but having trouble loading it. Nothing shows up.
I tried clearing my caches and cookies, and disabling all plugins, extensions, and add-ons, but it still does not work.
Here is the following code:
import React, { Component } from 'react'
import { Divider } from 'material-ui'
const styles = {
title:{
color: 'white',
textAlign: 'left',
marginLeft: 30
}
}
export default class TestingDisqus extends Component{
render(){
return(
<div>
<div style={styles.title}>
<font size="4">
Testing Disqus
</font>
</div>
<Divider style={{backgroundColor:'#282828'}}/>
<div id="disqus_thread"></div>
<script>
(function()
var d = document, s = d.createElement('script');
s.src = '//testingdisqus.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
)
}
}
Any insights would be appreciated! Thank you in advance.
In React it's best not to select and directly manipulate the DOM. React uses a virtual DOM and does the DOM manipulation for you. Also you have an IIFE in your JSX and in JSX you need to wrap all of your javascript in curly braces.
I recommend finding a React solution for this instead of trying to use vanilla JS in your JSX. Here is an open source react component that will likely solve your problem or get you started.
React-disqus-thread
import React from 'react'
import ReactDisqusThread from 'react-disqus-thread'
// in your class you can add this:
handleNewComment: function(comment) {
console.log(comment.text);
}
render: function () {
// and put a ReactDisqusThread in your JSX
return (
<ReactDisqusThread
shortname="example"
identifier="something-unique-12345"
title="Example Thread"
url="http://www.example.com/example-thread"
category_id="123456"
onNewComment={this.handleNewComment}/>
);
}
});