I try to test functionality of getUserConfirmation. Code is following:
getUserConfirmation={(message, callback) => {
const container = document.createElement('div');
// callback(false);
document.body.append(container);
ReactDOM.render(
<div
style={{
width: '400px',
height: '400px',
backgroundColor: 'black',
zIndex: 1000,
}}
/>,
container,
console.log('Here'),
);
}}
>
Code reacts to my attempt to change url and callback (console.log('here')) works. But nothing appears in browser. What I do wrongly?
It works in this example:
const getUserConfirmation = (message, callback) => {
const container = document.createElement("div");
// callback(false);
document.body.append(container);
ReactDOM.render(
<div
style={{
width: "400px",
height: "400px",
backgroundColor: "black",
zIndex: 1000
}}
/>,
container,
console.log("Here")
);
};
getUserConfirmation();
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
</body>
</html>
However, what's the purpose of this?
Why not have a single and fixed "root div" in the html and pass this element to ReactDOM.render?
I added position: 'absolute' and now I can see my div. Before I it 'hided' under scripts tags. Lol
Related
Getting an error with React portal in the production build but none in development. I'm getting error #200 "target container is not a DOM element". I have put my code below. Please ignore the CSS part.
import ReactDOM from 'react-dom'
import React from 'react'
const Modal_Styles={
backgroundColor:'#FFF',
position:'fixed',
top:'50%',
left:'50%',
right:'10%',
bottom:'10%',
padding:50,
textAlign:'justify',
transform:'translate(-50%,-50%)',
borderRadius:'12px',
zIndex:1000
}
const Overlay_Styles={
position:'fixed',
left:0,
top:0,
right:0,
bottom:0,
backgroundColor:'rgba(0,0,0,0.3)',
zIndex:1000,
}
export default function Modal({open,children,onClose}) {
if(!open){return null}
return ReactDOM.createPortal(
<>
<div style={Overlay_Styles}>
<div style={Modal_Styles}>
{children}
<button className='mbutton' onClick={onClose}>x</button>
</div>
</div>
</>,
document.getElementById('portal')
)
}
The index.html file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="C"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="portal"></div>
</body>
</html>
Any suggestions?
The names for both divs root and portal are correctly written in the index.js and modal.js.
I am working on a React project. I want my CSS to be embedded into HTML itself without having a network call for CSS.
CSS
body{
background-color: #000000;
}
into one file like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<style>
body{
background-color: #000000;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I have no knowledge of webpack
I have setup customize-cra and have config-override.js file.
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
May be this is what you need "react-style-tag"
From your post I think you want to have your styles inside the of your index.html file
I am new to React. I've been following a few tutorials and the documentation.I'm trying to make the following work:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Composable Squares</title>
</head>
<body>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
script.js
const Title = (props) => {
const { text } = props;
return React.createElement('h1', null, text);
}
const App = (props) => {
return React.createElement('div', null,
React.createElement(Title, { text: 'Title one!' } ),
React.createElement(Title, { text: 'Title two!!' } ),
React.createElement(Title, { text: 'Title three!!!' } )
)
}
ReactDOM.render(App, document.getElementById('container'));
I'm getting the following message:
Warning: Functions are not valid as a React child. This may happen if
you return a Component instead of from render. Or maybe
you meant to call this function rather than return it.
I've tried changing it to: ReactDOM.render(<App />, document.getElementById('container')) and I get Unexpected token <
How can I render the elements created by App?
Your App is a function. ReactDOM.render() expects an element as argument, not a function.
The quickest solution is to just invoke App():
ReactDOM.render(App(), document.getElementById('container'));
Or you can make App not a function, but assign to it the result of React.createElement('div'....
Demo:
const Title = (props) => {
const { text } = props;
return React.createElement('h1', null, text);
}
const App = (props) => {
return React.createElement('div', null,
React.createElement(Title, { text: 'Title one!' } ),
React.createElement(Title, { text: 'Title two!!' } ),
React.createElement(Title, { text: 'Title three!!!' } )
)
}
ReactDOM.render(App(), document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="//unpkg.com/react/umd/react.development.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="styles.css">
<title>Composable Squares</title>
</head>
<body>
<div id="container"></div>
<!-- script src="script.js"></script -->
</body>
</html>
When you use this,
ReactDOM.render(<App />, document.getElementById('container'))
You are getting error, because you are using JSX so you need a babel.
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Also make sure when you add babel, you must add type="text/babel" on your script tag,
<script type="text/babel" src="script.js"></script>
Demo
Read how to Add React to a Website.
I am automating a web page using Selenium Webdriver and Java ,am hit with the Polymer Web page which has shadowRoot elements in the Html. I am not able to reach the elements required.
I need to access the element with id="Contain" and id="callButton", I have tried to use the examples in the web which gave me an idea to access but i am not able to reach to the element. Can i get this automated with selenium is what i need to understand.
When i try to get the page source dynamically while automating elements below the shadow-root are not accessible.
The above snapshot is while i inspect the element. Dynamically if i take the page source i get the below html. In this i dont get any element after the first shadow-root
' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-
scale=1,minimum-scale=0.5,maximum-scale=3,user-scalable=yes">
<base href="/">
<title>Title</title>
<!--logo Favicon - http://www.favicon-generator.org/-->
<link rel="shortcut icon" type="image/x-icon"
href="./assets/img/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57"
href="./assets/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60"
href="./assets/img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72"
href="./assets/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76"
href="./assets/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114"
href="./assets/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120"
href="./assets/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144"
href="./assets/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152"
href="./assets/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180"
href="./assets/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"
href="./assets/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32"
href="./assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96"
href="./assets/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16"
href="./assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage"
content="./assets/img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--End of Favicon section--><!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Roboto&subset=latin,latin-ext" rel="stylesheet"
type="text/css">
<link href="styles.6818abb062a6ae399f29.bundle.css"
rel="stylesheet"/>
</head>
<body>
<app-login>
<!--Inline style for loading screen--><style>body, html {
height: 100%;
background: #FAFAFA;
}
#keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
border-radius: 50%;
border: 1px solid #CDCDCD;
border-top-color: #0277BD;
animation: spinner .6s linear infinite;
}
.app-loading {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<div class="app-loading">
<div class="spinner">
</div>
</div>
</app-login>
<script type="text/javascript"
src="inline.318b50c57b4eba3d437b.bundle.js"></script>
<script type="text/javascript"
src="polyfills.9a4f082a49343f8da8e1.bundle.js"></script>
<script type="text/javascript"
src="scripts.ccb2e44daa4fd4db3422.bundle.js"></script>
<script type="text/javascript"
src="main.aacb992b6c008772ed3d.bundle.js"></script>
</body>
</html>`
I have used a combination of Java script and XPaths to get the :
First element before the shadow-root by tagname
// Here i am using the getElementsByTagname to get tag which gets all the elements under the tag which is just before the second shadow-root.
' WebElement ironPages = (WebElement) jse.executeScript("return
arguments[0].shadowRoot.getElementsByTagName('iron-pages')[0]",
edgeCallControl); '
once i get the above , i am able to access every element by "id" of each of the element as per the HTml
Get the button button , where the Button is the ID.
` WebElement button = (WebElement) jse.executeScript("return
arguments[0].shadowRoot.querySelector('#Button')",
edgeManualDial);'
this ideas i got from the "Shadow-dom support for selenium"
I would like to add some animations to my angularjs applications, and surfing on dribble I found this example:
Can someone point me to the right direction for achieving this effect ? Are there some libs doing the work or is it entirely artisanal ?
Notice the 2 animations, the one from the front yellow button expanding to the full area, and the back area sliding/fading away
I am giving you an example, you can change the effects to meet your needs!
var app = angular.module('myApp', ['ngAnimate', 'fmp-card']);
app.controller('MainCtrl', function($scope) {
$scope.leftBackText = 'Here you can insert anything you want, may be a page!';
$scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69";
});
.my-card{
display: inline-block;
}
.back-text{
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
#container{
width: 100%;
}
#card-1{
float: left;
}
#card-2{
float: left;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Flip Card</title>
<link href="style.css" rel="stylesheet" />
<link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
<script data-require="angular-animate#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script>
<script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="container">
<fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px">
<div class="back-text"><img src={{rightBackText}} /></div>
</fmp-card>
<fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px">
<div class="back-text">{{leftBackText}}</div>
</fmp-card>
</div>
</body>
</html>