I am using TypeScript in React. I would like to create custom alerts and add to them images. I used
this method:
private alert() {
alert("This is an Alert Dialog");
}
Do you have any idea how to customize it?
Thans in advance for tips.
What you may want to look for is a modal box,
as you could style that so display alerts.
This page can help you get started:
https://www.w3schools.com/howto/howto_css_modals.asp
Or look into bootstrap which simplifies modals a lot:
https://getbootstrap.com/docs/4.0/components/modal/
The alert box is a system object, and not subject to CSS. You might want to use a third party library for that or add your own alert popup. Either way you can't style the default alert box.
You need to use modals. Here it is a sample:
import React from "react";
export const Modal = ({modalContent, style}) => {
return (
<div className="modal" style={style}>
{modalContent}
</div>
);
};
And usage is like this:
import { Modal } from '../Shared/Modal';
....
{this.state.Modal && <Modal style={{ animation: "fadeIn 1s, scaleUp 1s" }}
modalContent={
<div className="Add-BillRange">
<h1> MODAL </h1>
</div>
}
/>}
this.state.Modal controls if the modal should be showed or not.
Related
Google recently announced a new way of user-signing-in here.
https://developers.google.com/identity/gsi/web?hl=en
With this tutorial, the button was created by adding HTML code or javascript.
which looks like,
But since the button is all created and rendered in a new Iframe, I can’t customize the button style as I want.
Is there any way to change the button style as it was offered before?
Previously, I used
window.gapi.load('auth2', () => {
const auth2 = window.gapi.auth2.init(options);
auth2.attachClickHandler(
idButtonRef.current,
{},
onSuccessCallback,
onFailCallback,
);
});
idButtonRef.current is the button and all I need was just attach the button and eventlistener as the above code shows. So I was able to create the button style as I want.
Is there a way to do this with a new way of google user signing?
It's my own (and not elegant) way to customize button. I make "right" Google button invisible and then add click handler to my custom button. We need to trigger click() on div with role=button attribute.
My example with plain JavaScript, but you should easily make something similar with React.js:
CSS:
.g_id_signin {
display: none;
}
HTML:
<div id="g_id_onload"
data-client_id="{{GOOGLE_CLIENT_ID}}"
data-login_uri="http://localhost:3000/google"
data-ux_mode="redirect">
</div>
<div class="g_id_signin"
data-type="icon"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<button id="custom-google-btn">Continue with Google</button>
JavaScript:
const googleBtn = document.getElementById('custom-google-btn');
googleBtn.addEventListener('click', () => {
document.querySelector('.g_id_signin div[role=button]').click();
});
I am using react JS and I want to make use of an icon to basically make it look like a dropdown. Screenshot attached to this question.
I am able to call an onClick function using a button but the same code is not working with an i tag. The tutorial I am following may have been outdated. But I want to know the alternative.
Here is my class component.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Contact extends Component {
state = {}
onShowClick = (name, e) => {
console.log(name);
};
render() {
const { name, email, phone } = this.props;
return (
<div className='card card-body mb-3'>
<h4>{name}{' '} <i onClick={this.onShowClick.bind(this, name)} className='fas fa-sort-down' /></h4>
<button onClick={this.onShowClick.bind(this, name)}>Button</button>
<ul className='list-group'>
<li className='list-group-item'>E-mail: {email}</li>
<li className='list-group-item'>Phone: {phone}</li>
</ul>
</div>
);
}
}
// PropTypes - TypeChecking
Contact.propTypes = {
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired,
phone: PropTypes.string.isRequired
}
export default Contact;
My problem is with the tag inside the h4 tag.
The function onShowClick works perfectly fine with the button but not the icon.
I have used .bind and all and yet, I see no results.
How do I get it working?
Thanks for the help.
Top of my head, without reproducible minimal project, I am thinking of a couple reasons why this wouldn't be working main one being the following:
HTML is not handling your onClick properly because it is wrapped in a h4 and applied on a i tag. I strongly recommend avoiding adding the click events on h and I tags. What you could do here is have a wrapper div, get your h4 inline with your i tag, and wrap the latter with an other div onto which you apply your onClick.
Your code should work but you have to realize that the i element is not a button. This element shouldn't handle click events for multiple reasons like keyboard navigation, and ATs. A better practice would be to wrap this icon with a button. You can also reset the css of the button.
<button
style={{
border: "none",
margin: 0,
padding: 0,
background: "none"
}}
onClick={this.onShowClick.bind(this, name)}
>
<i className="fas fa-sort-down" />
</button>
Here I am creating a button in which when I click on button, it redirects to another page. Now the problem arises when I am setting className="btn". If I didn't use btn in className then this div is clickable but when I am setting className="btn" then This button is not clickable.
<div className="btn col">
<Link to={`/category/${category.slug}`}>{category.name}</Link>
</div>
Firstly, If you can show on your post your css code, It will be helpful to understand what is happening and to let people test it.
First Solution (useHistory)
I do not know if you have experience using React Router (https://reactrouter.com/web/api/Hooks) but what you can do is to add an onClick event to the div element and call history.push(). I let you an example below
import { useHistory } from "react-router-dom";
function Home() {
let history = useHistory();
function handleClick() {
history.push("/page");
}
return (
<div onClick={handleClick}>
Go to a page
</div>
);
}
Second Solution
I am not sure about what is happening with your css code but I am sure about is a z-index problem. Probably div is over your link component and you cannot click on it. I've found this post (Links not working inside div) check if implementing the solution, it solvers your problem
I am trying to create a website by using GatsbyJS, and I got stuck whenever I need to set a onClick event to toggle a class in one of my components. As a beginner with react and gatsby, I'm having a hard time to do it.
So essentially I want to make the following JS code in React/GatsbyJS:
const hamburger = document.querySelector('.burger_menur');
hamburger.addEventListener('click', function(){
this.classList.toggle('open');
});
The following code is my current code in Gatsby component. Have to say, I am using GSAP to make an animation.
This is my code:
import React from 'react';
import { Tween, Timeline } from 'react-gsap';
import '../styles/burger.scss'
const Burger = () => (
<Timeline
target={
<div className='burger'>
<div className='burger_menu'>
<div className='bar half start'></div>
<div className='bar'></div>
<div className='bar half end'></div>
</div>
</div>
}
>
<Tween from={{ opacity: '0', marginRight: '0rem' }} to={{ opacity: '1', marginRight: '5rem' }} ease="Back.easeOut" delay={2}/>
</Timeline>
);
export default Burger
Hopefully someone can help me out with this.
If you're going to go with React, don't manipulate the DOM directly.
More specifically, don't try to act directly on any part of the DOM generated by React.
Here, you're using plain DOM manipulation to attach your event to elements generated by React (also, there's a typo in your class name):
const hamburger = document.querySelector('.burger_menur');
hamburger.addEventListener('click', function(){
this.classList.toggle('open');
});
The thing is, while it may sometimes work, React will regenerate new elements for your menu when it deems it necessary, and your events listeners will be lost.
You have to do it "the React way":
...
<div className='burger'>
<div className={`burger_menu ${this.state.isOpen? ' open' : ''}`} onClick={() => this.setState({ isOpen: !isOpen })}>
<div className='bar half start'></div>
<div className='bar'></div>
<div className='bar half end'></div>
</div>
</div>
...
Don't forget to initialize your state with { isOpen: false }
Clicking the div will toggle this.state.isOpen, which is used to decide whether the class-name will be 'burger_menu' or 'burger_menu open'.
Note: There are more elegant ways to work with classlists when they get longer, but your component being simple and for the sake of clarity, a string template will more than do.
If any of this sounds confusing, please read through the official tutorial Intro To React, it's very well explained and covers everything needed here.
If you're already comfortable with this and want to know more about handling events in React, the docs has you covered once again: Handling Events
I am using the toast messages in reachjs together with the semantic-ui. The problem is that the toast message is showing behind the modal when dimmer is set to blurring. Otherwise it is showing on the top of the page as expected.
Do you have the same issues? How this can be corrected?
Thanks for your help!
<Modal
centered
size={'large'}
open={this.props.openVariationGeometry}
onClose={() => this.props.closeVariationGeometryModal()}
closeIcon
dimmer={'blurring'}
>
<Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
<Modal.Content>
<VariationGeometryForm />
</Modal.Content>
</Modal>
Example
define a css rule for your toast with filter: none, or a general rule like this
.toast-container {
filter: none !important;
}
It is very old question but I ended here looking for a solution to the same problem so I wrote this down. At first, as this issue says, the only way I found to show the toasts with a modal present is by putting the Toast Container inside the modal. This method has the problem that you could see also the "main" toast blurred under the modal.
Later I found a final solution here. Both the toast container and the modal must be mounted on the same DOM node (I used #App).
First you have to put the toast container in the App component:
const App = () => (
<div id='App'>
<YourComponents />
<ToastContainer
className='dimmer toast-container' // 'dimmer' class is required to avoid blurring by modal
/>
</div>
)
After that you need the following css rule:
.blurring.dimmable > .toast-container {
// this prevents the toast from darkening by the modal
background-color: unset;
}
And finally the modal must be mounted in the same node:
<Modal
centered
size={'large'}
open={this.props.openVariationGeometry}
onClose={() => this.props.closeVariationGeometryModal()}
closeIcon
dimmer={'blurring'}
mountNode={document.getElementById('App')} // modal mounted on #App
>
<Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
<Modal.Content>
<VariationGeometryForm />
</Modal.Content>
</Modal>