I have a simple div which uses react-tooltip
Inside the tooltip I am trying to render kendo progress bar but it doesn't seem to be working, the bar is shown but the progress is not shown
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import 'react-tooltip/dist/react-tooltip.css'
import { Tooltip as ReactTooltip } from 'react-tooltip'
import { ProgressBar } from '#progress/kendo-react-progressbars';
const App = () => {
const TooltipContentTemplate = () => {
return <div>
<ProgressBar value={20} labelVisible={false}/>
</div>
};
return (
<div className="container">
<div className="row mb-4" id="1"
data-tooltip-html={ReactDOMServer.renderToString(<TooltipContentTemplate></TooltipContentTemplate>)}>
Hello World
</div>
<ReactTooltip style={{zIndex:"10", backgroundColor:"black",color:"black",width:"200px",height:"300px",border:'1px solid black'}} anchorId="1"/>
<div>
<ProgressBar value={20} labelVisible={false}/>
</div>
</div>
);
};
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
Without hover on Hello World
On hover
I am trying with above code
This seems to be an issue related to the usage of ReactDOMServer.renderToString(), not sure what though.
You can try putting the tooltip content inside the tooltip component directly, instead of using data-tooltip-html on the anchor.
Your code updated:
import * as React from "react";
import * as ReactDOM from "react-dom";
import "react-tooltip/dist/react-tooltip.css";
import { Tooltip as ReactTooltip } from "react-tooltip";
import { ProgressBar } from "#progress/kendo-react-progressbars";
const App = () => {
const TooltipContentTemplate = () => {
return (
<div>
<ProgressBar value={20} labelVisible={false} />
</div>
);
};
return (
<div className="container">
<div className="row mb-4" id="1">
Hello World
</div>
<ReactTooltip
style={{
zIndex: "10",
backgroundColor: "black",
color: "black",
width: "200px",
height: "300px",
border: "1px solid black"
}}
anchorId="1"
>
{/* tooltip content here */}
<TooltipContentTemplate></TooltipContentTemplate>
</ReactTooltip>
<div>
<ProgressBar value={20} labelVisible={false} />
</div>
</div>
);
};
ReactDOM.render(<App />, document.querySelector("my-app"));
Related
Can you explain me the problem that I have in my code...I am trying to get grapesjs editor into my code...Can anyone help me out on this one??
import React, {useState, useEffect} from 'react';
import grapesjs from 'grapesjs';
import Basics from "grapesjs-blocks-basic"
import BaseReactComponent from "../../base-react-component";
import ReactComponents from "../../react-components";
import MuiComponents from "../../mui-components/index"
import Listing from '../../Listing';
import {Button, Slider, Snackbar} from "#material-ui/core"
import MuiButton from "mui-button";
const EditStepUI = (props) => {
const [editor, setEditor] = useState(true)
useEffect(() => {
const editor = grapesjs.init({
container: "#gjs",
height: "100%",
storageManager: false,
noticeOnUnload: false,
plugins: [Basics, BaseReactComponent, ReactComponents, MuiComponents]
});
console.log(editor);
}, [])
return (
<div id="editor">
editor.setComponents(`
<div>
<span>
Foo
</span>
<Listing>
<div>
Bar
</div>
<MuiButton variant='contained' color='primary'>
Click Me
</MuiButton>
<Slider />
</Listing>
<Snackbar>
<MuiButton variant='contained' color='secondary'>
Click Me
</MuiButton>
</Snackbar>
<Slider />
</div>
`);
</div>
)
}
export default EditStepUI;
I have a video on my site that I want to be paused when I scroll it and play only when its visible. I have tried some solutions from internet but things are not working out.
This is my current code. I have tried out a solution from stackoverflow which shows me observe error. I would be glad if someone helps me out on this. Thank you.
Player.js
import { Box, Container } from "#mui/system";
import React, { useEffect, useRef, useState } from "react";
import ReactPlayer from "react-player";
import styled from "styled-components";
import videosample from "./homepagevideo.mp4";
const ResponsiveStyledPlayer = () => {
const Player = ({ className }) => (
<ReactPlayer
url={videosample}
className={className}
playing={true}
autoplay={true}
width="100%"
height="100%"
controls={false}
muted
loop={true}]
/>
);
const AbsolutelyPositionedPlayer = styled(Player)`
position: absolute;
top: 0;
left: 0;
`;
const RelativePositionWrapper = styled.div`
position: relative;
padding-top: 56.25%;
`;
return (
<Box>
<Container>
<RelativePositionWrapper>
<AbsolutelyPositionedPlayer />
</RelativePositionWrapper>
</Container>
</Box>
)
};
export default ResponsiveStyledPlayer;
you can you Waypoint for your requirement. I have made one demo for you, you can refer to that. Link Demo
import React, { useState } from 'react';
import ReactPlayer from 'react-player/youtube';
import { Waypoint } from 'react-waypoint';
import './style.css';
export default function App() {
let [shouldPlay, updatePlayState] = useState(false);
let handleEnterViewport = function () {
updatePlayState(true);
};
let handleExitViewport = function () {
updatePlayState(false);
};
return (
<div>
<Waypoint onEnter={handleEnterViewport} onLeave={handleExitViewport}>
<div>
<ReactPlayer
playing={shouldPlay}
url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
/>
</div>
</Waypoint>
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
<h1>hii</h1>
<br />
</div>
);
}
my background image is not working can any buddy check it?
import React from 'react'
import "./Home.css"
// backgroundimage
import bgImg from "./../assests/img/bg-sec1.jpg"
function Home() {
return (
<div>
<div styles={{ backgroundImage:`url(${bgImg})` }}>
<h1>This is red car</h1>
</div>
</div>
)
}
function Home() {
return (
<div>
<div style={{ backgroundImage:url(${bgImg}) }}>
<h1>This is a red car</h1>
</div>
</div>
)
}
At least you must fix typo styles->style.
I'm having an issue with Scrollbars just in Safari.
App.js
import Main from './components/Main';
function App() {
return (
<>
<div className="app">
<div className="app-main-container">
<div style={{position: 'absolute', inset: '0px 0px 0px 0px'}}>
<div className="app-container">
<div className="rct-app-content">
<div className="app-header">
</div>
<div className="rct-page">
<Main />
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default App;
In my Main file I have the Scrollbar
import React, { useState, useEffect } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
const Main = () => {
const getScrollBarStyle = () => {
return {
height: 'calc(100vh - 50px)'
}
}
return (
<>
<Scrollbars
className="rct-scroll"
autoHide
autoHideDuration={100}
style={getScrollBarStyle()}
>
<div className="rct-page-content">
<div className="row">
<h3>TEST</h3>
</div>
</div>
</Scrollbars>
</>
)
}
export default Main;
When I run in Firefox and Chrome, the "TEST" is displayed in the screen, but in Safari it is empty.
I learn a course with bootstrap and to practice it I wanted to use it in ReactJS. The app is very small, is just a practice, not a real project.
I guess that I do something wrong, because I don't see on my screen the 4 columns. This is what I get
screenshot
So I created a react app
npx create-react-app my-app
and I installed bootstrap and use it.
npm install --save bootstrap
In index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
I have the App.js
import React, { Component } from 'react';
import './App.css';
import CardList from './componets/card-lists/card-list';
class App extends Component {
state = {
cards: []
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then(users => this.setState({ cards: users }))
.catch((error) => {
console.log('Fetch users error ', error)
})
}
render() {
return (
<div className="App">
{this.state.cards.map((card) => {
return <CardList card={card} key={card.id} />
})}
</div>
)
}
}
export default App;
And from here I pass props to card-list.js component.
const cardList = ({ card }) => {
return (
<div>
<div className="container">
<div className="row">
<div className="col-sm-4 col-md-4 col-lg-4 card-list">
<button className="btn btn-danger">click</button>
<h1>{card.name}</h1>
<p>{card.email}</p>
</div>
</div>
</div>
</div>
);
};
export default cardList;
In the css I have just a few lines:
.card-list {
background-color: yellow;
border: 1px solid red;
margin: 10px;
}
Someone please tell me, what I'm doing wrong?
You need to move divs with classes container and row to the App.js.
App.js
render() {
return (
<div className="App">
<div className="container">
<div className="row">
{this.state.cards.map(card => {
return <CardList card={card} key={card.id} />;
})}
</div>
</div>
</div>
);
}
Cardlist
const cardList = ({ card }) => {
return (
<div>
<div className="col-sm-4 col-md-4 col-lg-4 card-list">
<button className="btn btn-danger">click</button>
<h1>{card.name}</h1>
<p>{card.email}</p>
</div>
</div>
);
};
Also please not that Bootstrap grid system uses 12 column, and you are using 4 in classNames, so you have 12 /4 =3 columns, if you want to have 4 columns, you need to use 3 in your components like <div className="col-sm-3 col-md-3 col-lg-3 card-list">