I'm using Facebook Comments plugin for my React website. Plugin section is displayed ONLY after reloading the page. Does anybody know the solution?
index.html
---
<body>
<div id="root"></div>
<div id="fb-root"></div>
<script async defer
crossorigin="anonymous"
src="https://connect.facebook.net/uk_UA/sdk.js#xfbml=1&version=v8.0"
nonce="2CmNBc9x"
></script>
</body>
OnlineReception.jsx // here I want to render FC plugin
---
import React from 'react';
import './css/OnlineReception.css';
const OnlineReception = (props) => {
...
return (
<div className="OnlineReception">
...
<div className="fb-comments"
data-href="mywebsite-link-here"
data-numposts="10"
data-width=""
></div>
</div>
)
}
export default OnlineReception;
SDK integration is taken from here.
Also, I'm using HashRouter
{/* online-reception route */}
<Route path="/online-reception" render={
() =>
<OnlineReception
props here
/>
} />
Related
I am having some troubles integrating a component from the outside library 'react-calendly', the PopUpButton widget specifically, that requires the parent DOM node to be inserted into. My current understanding is that my issue is being caused by the fact that Next.js uses SSR and therefore I do not have access to the browser. How can I work around this? For reference, my website is a very simple fullstack app for his business and I am new to React/full-stack development. Here is the code for the app portion that renders my page components:
import '../styles/globals.css'
import styles from '../styles/App.module.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
function MyApp({Component, pageProps}) {
return (
<div className={styles.app}>
<div>
<Navbar />
</div>
<div className={styles.body} id="body">
<Component props={pageProps} />
</div>
<div>
<Footer className={styles.footer}/>
</div>
</div>
)
}
export default MyApp
And here is the code for my specific page component:
import styles from '../styles/Home.module.css'
import Head from 'next/head'
import { PopupButton } from 'react-calendly'
export default function Home() {
return (
<div className="home">
<Head>
<title>Homepage</title>
</Head>
<div className="cal_div">
<PopupButton
url="https://calendly.com/my_url"
rootElement={document.getElementsById("body")}
text="Click here to schedule!"
/>
</div>
</div>
)
}
I have started learning React and I was creating the navigation bar.
I have leftNavigationBar defined like this
const LeftNavigationBar = (props) => {
return (
<header className={share.mypage_header} id="leftcolumn">
<Helmet>
<script type="text/babel" src="../../common/js/share.js" />
</Helmet>
</header>
);
};
export default LeftNavigationBar;
but share.js did not detected.
I put require('../../common/js/share.js'); on the top and it started working and code becomes like this
require('../../common/js/share.js');
const LeftNavigationBar = (props) => {
return (
<header className={share.mypage_header} id="leftcolumn">
<Helmet>
<script type="text/babel" src="../../common/js/share.js" />
</Helmet>
</header>
);
};
export default LeftNavigationBar;
I want to know why share.js did not worked when added inside Helmet but worked when added as require on top.
Please help.
So from the title itself. I already integrated a revolution-slider that is supplied by the theme I bought. It works fine and loads all the necessary scripts when I first load the page. However, the problem starts when I navigate to a different page like the contacts page. It loads the component well but when I go back to the page that displays the revolution slider, the necessary scripts for the slider does not work anymore. I have placed the revolution-slider scripts in the index.blade.html file. Here is my code.
Do you have any idea on how to load the slider again?
index.blade.html
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<tittle>
<body class="stretched">
<div id="app"></div>
// revolution-slider script here
...
<script type="text/javascript" src="{{ asset('public/slider/jquery.themepunch.tools.min.js') }}">
</script>
</body>
</html>
MainPage.js
import React, { useEffect } from 'react';
import AppSlider from '#domain/main/AppSlider';
const MainPage = () => {
return (
<AppSlider />
);
};
export default MainPage;
AppSlider.js
import React from 'react';
const AppSlider = () => {
return (
<section id="slider" className="slider-element full-screen slider-parallax">
<div className="revslider" data-alias="sleek-landing-page" />
</section>
);
};
export default AppSlider;
I have been trying to add facebook feed to a gatsby website that I'm working on and it doesn't seem to work!
I've tried to add the scripts in gatsby-ssr.js
const React = require("react")
exports.onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<div id="fb-root"></div>,
<script
async={true}
defer={true}
crossOrigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1"
></script>,
])
}
then in component
<div
className="fb-page"
data-href="https://www.facebook.com/TechnoBondCo/"
data-tabs="timeline"
data-width="400"
data-height="400"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="false"
>
<blockquote
cite="https://www.facebook.com/TechnoBondCo/"
class="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/TechnoBondCo/">
تكنوبوند - صناع الكلادينج Techno Bond
</a>
</blockquote>
</div>
but it didn't work, I also tried to use react-facebook but I cant seem to change the width or height of the iframe
any idea how to do this?
ERRORS USING REACT HELMET
I get this console error:
- warn "export 'default' (imported as 'Helmet') was not found in 'react-helmet'
and get this browser error:
You need to use <Helmet> tag, like this:
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
You can check for further information about Gatsby's Helmet, and React Helmet, but basically, <Helmet> component allows you to insert a few code that will be placed after compilation inside the <head> tag.
You can use it in any component, for example, in IndexPage component it would be:
import { Helmet } from 'react-helmet';
const IndexPage = () => (
<Layout>
<SEO title="Live" />
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
I've tested in my local machine it loads perfectly as it shows the following screenshot:
I want to create a basic web application using react. I have implemented creating buttons. I want to redirect to another page on button click. Below is my App.js code
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<p>
<buttontoolbar>
<button const path = '/Components'> Click Me </button>
</buttontoolbar>
</p>
</header>
</div>
);
}
export default App;
When i click on 'click me' button it should redirect to Components.js. Below is the code for Components.js
import React from "react"
function app(){
return(
<p>
Welcome to the world.
</p>
)
}
export default app
Long back i have done these king of things in ASP.NET. there i have used Response.redirect to redirect pages which is so simple. As I am new to React, i know nothing about this. Is there anything like that in React?
Basically React does not have "pages". The idea is more to "show" or "hide" components, this gives the user a page/view impression.
The easiest way to achieve routing in React is to use a declarative router library like react router especially for more complex apps.
Here is an example without react router to understand the basic concept:
const ViewOne = ({onClick}) => (
<div>
View 1 <br />
<button onClick={() => onClick("view2")}>Go to view 2</button>
</div>
);
const ViewTwo = ({onClick}) => (
<div>
View 2 <br />
<button onClick={() => onClick("view1")}>Go to view 1</button>
</div>
);
const App = () => {
const [currentView, setCurrentView] = React.useState("view1");
return (
<div>
{
currentView === "view1" ?
<ViewOne onClick={page => setCurrentView(page)} /> :
<ViewTwo onClick={page => setCurrentView(page)} />
}
</div>
);
};
const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);
<div id="my-app"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
Use react-router-dom package to define routing and then use one of below mentioned ways on onClick event of button.
this.props.history.push("componentpath").
browserHistory object (in react-router package).
Please refer this Link
try Link component of react-router-dom and pass to as a path to it wherever you want to redirect on onClick.
import { Link } from 'react-router-dom'
and Eg.
<Link to={'/Components'}>
<button > Click Me </button>
</Link>
const {Link, BrowserRouter} = window.ReactRouterDOM
function App(){
return (
<BrowserRouter>
<button><Link to='/abc' target='_blank'> Click Me </Link></button>
</BrowserRouter>
)
}
ReactDOM.render(<App/>, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<body><div id="root"></div></body>