I have a problem with show details of products in sharing on Facebook or LinkedIn. I send the correct URL but is showing details of the site. The front-end of the site is reacting js version 17.0.2, the back-end is API WordPress and I use the library react-share.
I try to change the library ShareThis-reactjs but is the same problem.
import React from "react";
import {FacebookShareButton,LinkedinShareButton,LinkedinIcon,FacebookIcon,
} from 'react-share';
import './styleBtnShare.css';
const BtnPartage = (props) => {return (
<>
<div className="btnsSShare" style={props.style}>
<FacebookShareButton
url={props.url}
title={props.title}
image={props.image}
description={props.content.replace(/<[^>]*>?/gm, '')}
>
<FacebookIcon size={40} round={true} />
</FacebookShareButton>
<LinkedinShareButton
url={props.url}
title={props.title}
image={props.image}
description={props.content.replace(/<[^>]*>?/gm, '')}
>
<LinkedinIcon size={40} round={true} />
</LinkedinShareButton>
</div>
</>
);
}
export default BtnPartage;
Related
How to create a settings option for a website that allows users to change the background color, language, dark mode and light mode?
I want Settings Option Which is similar to Qwant Homepage settings
You must provide a code, remember that this forum seeks to solve problems.
I've made a quick example of how you can make a theme system.
You can use two buttons and useState to toggle this. Also, you can use cookies to storage the actual theme of the user.
This is an example component:
First, install
npm install js-cookie
Then, create a component file:
import React, { useState } from 'react';
const Toggler = () => {
const toggleTheme = (themeType) => {
Cookies.set('theme', themeType);
};
return (
<div>
<button onClick={() => toggleTheme('light')}>Light Theme</button>
<button onClick={() => toggleTheme('dark')}>Dark Theme</button>
<p>Current theme is {theme}</p>
</div>
);
}
export default Toggler;
Then you can call Toggler from other components. Also you can get the mode with Cookies.get('theme')
import Cookies from 'js-cookie';
const [theme, setTheme] = useState(Cookies.get('theme') || 'light');
Once you have the theme, you can use this as conditional for your styles or html code.
I wanted to add multiple pages to my React website so I started using the HashRouter import from react-router-dom. Since then only my main page loads and I am no longer able to use local links in the page. I can't redirect the user to specific areas on the main page which i used to be able to do before I started using the Router import. This website also uses github pages if that affects anything.
I am currently using the <a> tags like this:
<a className="nav-link" href="/#about-me">
About Me
</a>
with the URL appearing as this with no content below it
http://localhost:3000/#about-me
I have also tried using the <Link> tag but it just ends up reloading the page.
<Link className="nav-link" to="/#about-me">
About Me
</Link>
With this URL appearing instead:
http://localhost:3000/#/#about-me
How do I get my page to scroll down to the id rather than reload or load a blank page?
Main code snippets for reference:
Home.js snippet
const Home = () => {
return (
<div className='main'>
<section className='section-welcome'>
<Introduction />
</section>
<section id='about-me' className='section-about-me'>
<AboutMe />
</section>
</div>
);
};
export default Home;
Main.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home.js';
import NoPage from './Pages/NoPage.js';
const Main = () => {
return (
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path="*" element={<NoPage />} />
</Routes>
);
}
export default Main;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);
The problem is with how the code runs with GitHub pages, not the references.
Currently, whenever a link is clicked in the NavBar the website tries to load the URL as root/{href from <a> tag}. This conflicts with GitHub pages as it searches links under the githubname.github.io/project-name/ and the program is trying to display githubname.github.io/#.
In order to fix this, you need to add a basename in the <Router> tag which forces the page to load at /project-name/#.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router basename={process.env.PUBLIC_URL}>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);
Relevant Links for more info
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
https://create-react-app.dev/docs/deployment/#building-for-relative-paths
I am creating a multipage website using React and hosting it on Github pages. The website loads perfectly fine on localhost, but runs into trouble on Github pages when trying to enter a subpage.
The main page displays on Github Pages, but when the subpage link is clicked, Github pages displays the error 404 page.
404
File not found
The site configured at this address does not contain the requested file.
Although this error is shown the URL displays the same way the local host displays it.
Main Page
LocalHost: http://localhost:3000/my-website/ ** Runs Fine **
Github: https://myname.github.io/my-website/ ** Runs Fine **
Sub Page
LocalHost: http://localhost:3000/my-website/project ** Runs Fine **
Github: https://myname.github.io/my-website/project ** Runs into Error **
Relevant Code:
Home.js snippet
<div>
<a href='/my-website/project'>
<img alt='Project 1' src={Sunset} />
</a>
</div>
Main.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Pages/Home.js';
import Project from './Pages/Project.js';
import NoPage from './Pages/NoPage.js';
const Main = () => {
return (
<Routes>
<Route path='/' element={<Home />}></Route>
<Route path='/project' element={<Project />}></Route>
<Route path="*" element={<NoPage />} />
</Routes>
);
}
export default Main;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router basename={`/${process.env.PUBLIC_URL}`}>
<App /> {/* The various pages will be displayed by the `Main` component. */}
</Router>
</React.StrictMode>
);
Issues
Assuming your package.json file specifies a correct homepage entry, i.e. "homepage": "https://myname.github.io/my-website", there are a couple issues.
Github pages don't work well with the BrowserRouter. Use the HashRouter instead.
Import and use the Link component to link to pages within the app. Using a raw anchor tag is likely sending a page request to the server for a sub-route that doesn't exist. (This is why the HashRouter is necessary, BTW)
Updates
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { HashRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>
);
home.js
Replace the raw anchor tag and import and use the Link component that links to the "/project" route path.
import { Link } from 'react-router-dom';
...
<div>
<Link to='/project'>
<img alt='Project 1' src={Sunset} />
</Link>
</div>
The solution was best described in this post in addition to doing what Drew Reese has commented.
Use anchors with react-router
In summary:
You need to install react-router-hash-link.
npm install --save react-router-hash-link
Add import { HashLink as Link } from 'react-router-hash-link'; to the page you use the links.
And use it as shown:
<Link className="nav-link" to="/#about-me">
About Me
</Link>
I am making this post, as so far with my React program, I have used React Drop-Zone to create a drag drop place, but what I am trying to do is when a local html file is button submitted, I want it to go to a specific / then grab the data from the new local / url.
I'm wondering whether this is possible with just React, or will I need to use Express to create a server, so on submit it uploads it to finish the task?
Upload Local Html File > go to specific / > once inside grab data from page.
Is this possible? or is a API needed?
import React from 'react';
import { useDropzone } from 'react-dropzone';
function DropZoneComponent({ open }) {
const { getRootProps, getInputProps, acceptedFiles } =
useDropzone({});
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<div className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} />
<p>Drag The Html File Here</p>
</div>
<aside>
<ul>{files}</ul>
</aside>
</div>
);
}
export default DropZoneComponent;
Im trying to use InputMask from PrimeVue in project on Vue3
I have block in template tag:
<div class="sdf">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
and i have script:
export default {
data: () => ({
val1: null,
})
}
Everything seems okay, and console doesn't show any errors, but still, input is not visible, only label is shown. What do i do wrong?
It sounds like you didn't register InputMask.
You could register it globally with app.component('InputMask', InputMask):
// main.js
const { createApp } = require('vue')
import PrimeVue from 'primevue/config'
import InputMask from 'primevue/inputmask'
import App from './App.vue'
createApp(App)
.use(PrimeVue)
.component('InputMask', InputMask)
.mount('#app')
demo