react-bootstrap#Toast JavaScript Examples
The following examples show how to use
react-bootstrap#Toast.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: videostreamer.js From RC4Community with Apache License 2.0 | 6 votes |
|
Alert = ({ handleToast, show }) => {
return (
<ToastContainer
position="bottom-start"
style={{ zIndex: "10" }}
className="p-3"
>
<Toast
show={show}
onClose={handleToast}
delay={60000}
autohide
bg="warning"
>
<Toast.Header>
<strong className="me-auto">Stream Alert!</strong>
</Toast.Header>
<Toast.Body>
Thank you for watching! Looks like the streaming has stopped! Please
stay tune and refresh the page if this alert does not shows up!
</Toast.Body>
</Toast>
</ToastContainer>
);
}
Example #2
| Source File: App.js From React-Messenger-App with MIT License | 5 votes |
|
function App() {
const [show, setShow] = useState(false);
const [notification, setNotification] = useState({title: '', body: ''});
const [isTokenFound, setTokenFound] = useState(false);
getToken(setTokenFound);
onMessageListener().then(payload => {
setShow(true);
setNotification({title: payload.notification.title, body: payload.notification.body})
console.log(payload);
}).catch(err => console.log('failed: ', err));
return (
<div className="App">
<Toast onClose={() => setShow(false)} show={show} delay={3000} autohide animation style={{
position: 'absolute',
top: 20,
right: 20,
minWidth: 200
}}>
<Toast.Header>
<img
src="holder.js/20x20?text=%20"
className="rounded mr-2"
alt=""
/>
<strong className="mr-auto">{notification.title}</strong>
<small>just now</small>
</Toast.Header>
<Toast.Body>{notification.body}</Toast.Body>
</Toast>
<header className="App-header">
{isTokenFound && <h1> Notification permission enabled ?? </h1>}
{!isTokenFound && <h1> Need notification permission ❗️ </h1>}
<img src={logo} className="App-logo" alt="logo" />
<Button onClick={() => setShow(true)}>Show Toast</Button>
</header>
</div>
);
}
Example #3
| Source File: translateCard.js From masakhane-web with MIT License | 4 votes |
|
export default function TranslateCard() {
const [input, setText] = useState("");
const [translation, setTranslation] = useState('...');
const [srcLanguages, setSrcLanguages] = useState([]);
const [tgtLanguages, setTgtLanguages] = useState([]);
const [show, setShow] = useState(false);
const [src_lang, setSrc_Lang] = useState('English');
const [tgt_lang, setTgt_Lang] = useState('Swahili');
const [feedBackForm, setFeedBackForm] = useState({});
const textareaRef = useRef(null);
const textareaRef2= useRef(null);
const [feedbackToken, setFeedbackToken] = useState(
localStorage.getItem('feedbackToken') || ''
);
const [copySuccess, setCopySuccess] = useState('');
const [showToast, setShowToast] = useState('');
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const copyToClipboard = () => {
setCopySuccess('Translation Copied!');
setShowToast(true);
};
const handleChangeSrc_Lang= (e) => {
//localstorage
const name = e.target.value
localStorage.setItem('src_lang', name);
//set state
setSrc_Lang(name);
//get target languages
const target = srcLanguages.filter(x => x.name === name)
const target_languages = target[0].targets
setTgtLanguages(target_languages)
setTgt_Lang(target_languages[0].name)
};
const handleChangeTgt_Lang = (e) => {
//localstorage
localStorage.setItem('tgt_lang', e.target.value);
//set state
setTgt_Lang(e.target.value);
// console.log(e.target.value)
};
const handleTranslate = (e) => {
console.log('translating ..')
console.log(src_lang)
console.log(tgt_lang)
e.preventDefault()
fetch(
'/translate',
{
method: 'post',
// mode: 'no-cors',
body: JSON.stringify({input, src_lang, tgt_lang}),
headers: {
'Content-Type': 'application/json'
},
// credentials: 'same-origin',
})
.then(res => res.json())
.then(data => {
// console.log({ data })
// do something here
setTranslation(data.output)
})
};
const submitFeedBack = (formData) => {
// first set state of feedback Form
setFeedBackForm({...formData});
// then submit feedback form to db here
// here's where you write the function to push feedback to backend
console.log({formData})
fetch(
'/save',
{
method: 'post',
// mode: 'no-cors',
body: JSON.stringify({
src_lang: formData.src_lang,
tgt_lang: formData.tgt_lang,
accurate_translation: formData.accurate_translation,
know_src_lang: formData.know_src_lang,
know_tgt_lang: formData.know_tgt_lang,
own_translation: formData.own_translation,
text: formData.text,
translation: formData.translation,
understand_translation: formData.understand_translation,
feedbackToken: formData.feedbackToken
}),
headers: {
'Content-Type': 'application/json'
},
// credentials: 'same-origin',
})
.then(res => res.json())
.then(data => {
//console.log({data})
// do something here
handleClear()
})
}
const handleClear = () => {
// clears text part
setText('');
// clear translation
setTranslation('...');
}
useLayoutEffect(() => {
// Reset height - important to shrink on delete
textareaRef.current.style.height = "inherit";
// Set height
textareaRef.current.style.height = `${Math.max(
textareaRef.current.scrollHeight,
MIN_TEXTAREA_HEIGHT
)}px`;
}, [input]);
useLayoutEffect(() => {
// Reset height - important to shrink on delete
textareaRef2.current.style.height = "inherit";
// Set height
textareaRef2.current.style.height = `${Math.max(
textareaRef2.current.scrollHeight,
MIN_TEXTAREA_HEIGHT
)}px`;
}, [input]);
// console.log({feedbackToken});
// console.log({tgt_lang});
// console.log({feedbackToken});
let srcLang = [];
let tgtLang = [];
useEffect(()=> {
// define fetch function
let src = [];
let tgt = [];
const fetchLanguages = async ()=> {
await fetch(
'/translate',
{
method: 'get',
headers: {
'Content-Type': 'application/json'
},
// credentials: 'same-origin',
})
.then(res => res.json())
.then(data => {
console.log({ data})
// do something here
setSrcLanguages(data)
setTgtLanguages(data[0].targets)
})
}
// call fetch function
fetchLanguages()
}, [])
// console.log(srcLanguages)
// console.log(tgtLanguages)
// console.log(tgt_lang)
return (
<Container className="border">
<Modal
scrollable={true}
show={show}
onHide={handleClose}
centered
size="lg"
>
<Modal.Header closeButton style={{backgroundColor:'#F2F0E9'}}>
<Col style={{textAlign: 'center'}}>
<h4 style={{ fontSize: 14, color: '#717171' }}>GIVE FEEDBACK</h4>
<p style={{ fontSize: 11, color: 'gray' }}>We appreciate your feedback and your contribution will help make our translation better.</p>
</Col>
</Modal.Header>
<Modal.Body>
<MultiStepForm
src_lang={src_lang}
tgt_lang={tgt_lang}
text={input}
translation={translation}
setShow={setShow}
submitFeedBack={submitFeedBack}
setFeedbackToken={setFeedbackToken}
feedbackToken={feedbackToken}
/>
</Modal.Body>
</Modal>
<Row className="header" style={{ backgroundColor: 'aliceblue', height: 60, fontSize: '1rem', padding: '0.5rem 0.5rem' }}>
<Col className="border-right" style={{marginBottom: 10}}>
<Row>
<Col md={6} xs={12}>
<Form inline>
<Form.Group controlId="fromform">
<Form.Label>From: </Form.Label>
<Form.Control value={src_lang} style={{ border: 0, marginLeft: 10 }} as="select" size="sm" custom onChange={handleChangeSrc_Lang}>
{
srcLanguages && srcLanguages.map((option, index) => {
return (<option key={index} value={option.name}>{option.name}</option>)
})
}
</Form.Control>
</Form.Group>
</Form>
</Col>
{/* <Col className="d-none d-sm-block">
<Row>
{
srcLanguages.length > 1 && srcLanguages
.filter(x => x.value !== src_lang)
.slice(0, 2)
.map((option, index) => {
return (
<Button key={option.id} variant="light" size="sm" onClick={() => setSrc_Lang(option.name)}>{option.name}</Button> )
})
}
</Row>
</Col> */}
</Row>
</Col>
<Col style={{ marginLeft: '15px' }}>
<Row>
<Col md={6} xs={12}>
<Form inline>
<Form.Group controlId="fromform" as={Row}>
<Form.Label>To: </Form.Label>
<Form.Control md={6} xs={12} value={tgt_lang} style={{ border: 0, marginLeft: 10 }} as="select" size="sm" custom onChange={handleChangeTgt_Lang}>
{
tgtLanguages.map((option, index) => {
return (<option key={index} value={option.name}>{option.name}</option>)
})
}
</Form.Control>
</Form.Group>
</Form>
</Col>
{/* <Col className="d-none d-sm-block">
<Row>
{
tgtLanguages.length > 1 && tgtLanguages
.filter(x => x.value !== tgt_lang)
.slice(0, 2)
.map((option, index) => {
return (
<Button key={option.id} variant="light" size="sm" onClick={() => setTgt_Lang(option.name)}>{option.name}</Button> )
})
}
</Row>
</Col> */}
</Row>
</Col>
</Row>
<Row style={{ minHeight: '250px', marginTop: '20px' }}>
<Col md={6} xs={12} className="ml-1" style={{ paddingTop: '20px', paddingBottom: '20px', marginLeft: '10px' }}>
<Form>
<Form.Group controlId="Form.ControlTextarea">
<Form.Control
as="textarea"
placeholder="Enter Text"
rows="3"
name="text"
ref={textareaRef}
style={{ fontSize: 24, minHeight: MIN_TEXTAREA_HEIGHT, resize: 'none' }}
value={input}
onChange={e => setText(e.target.value)}
/>
</Form.Group>
</Form>
<Row>
<Col md={10} xs={10}>
<Button variant="primary" style={{ marginBottom: 10 }} onClick={handleTranslate}>Translate</Button>
</Col>
<Col md={2} xs={2} lg="2">
<Button style = {{color:'grey'}} variant = 'link' size="sm" onClick={handleClear}><i className="fas fa-times"></i></Button>{' '}
</Col>
</Row>
</Col>
<Col style={{ paddingTop: '20px', paddingBottom: '20px' }}>
<Form>
<Form.Group controlId="Form.ControlTextarea2">
<Form.Control
controlid="translation"
as="textarea"
placeholder="..."
rows="3"
name="text"
ref={textareaRef2}
style={{ fontSize: 24, minHeight: MIN_TEXTAREA_HEIGHT, resize: 'none' }}
value={translation}
readOnly
isInvalid={!translation}
// onChange={e => setText(e.target.value)}
// autoFocus={showToast}
/>
{!translation && (
<Form.Control.Feedback type="invalid">
Sorry, there’s no translation for that phrase.
</Form.Control.Feedback>
)}
</Form.Group>
</Form>
<Row>
<Col md={10} xs={10}>
{/* <Button variant="light" size = 'sm' style={{ bottom: '10px' }} onClick={handleShow}>Give Feedback on Translation</Button> */}
</Col>
<Col md={2} xs={2} lg="2">
<OverlayTrigger
placement='top'
overlay={
<Tooltip id={'tooltip-top'}>
Copy <strong>Translation</strong>.
</Tooltip>
}
>
<CopyToClipboard text={translation} onCopy={copyToClipboard}>
<Button variant="light" size="sm"><i className="fa fa-copy"></i></Button>
</CopyToClipboard>
</OverlayTrigger>
</Col>
</Row>
</Col>
</Row>
<div aria-live="polite" aria-atomic="true" style={{ position: 'relative' }}>
<Toast
onClose={() => setShowToast(false)}
show={showToast}
delay={3000}
autohide
style={{
position: 'absolute',
bottom: 0,
left: 0
}}
>
<Toast.Body style={{color: 'black'}}>{copySuccess}</Toast.Body>
</Toast>
</div>
</Container>
)
}
Example #4
| Source File: index.jsx From basic-redis-chat-app-demo-python with MIT License | 4 votes |
|
export default function Login({ onLogIn }) {
const [username, setUsername] = useState(
() => DEMO_USERS[Math.floor(Math.random() * DEMO_USERS.length)]
);
const [password, setPassword] = useState("password123");
const [error, setError] = useState(null);
const onSubmit = async (event) => {
event.preventDefault();
onLogIn(username, password, setError);
};
return (
<>
<div className="login-form text-center login-page">
<div
className="rounded"
style={{
boxShadow: "0 0.75rem 1.5rem rgba(18,38,63,.03)",
}}
>
<div className="position-relative">
<div
className="row no-gutters align-items-center"
style={{
maxWidth: 400,
backgroundColor: "rgba(85, 110, 230, 0.25)",
paddingLeft: 20,
paddingRight: 20,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
}}
>
<div className="col text-primary text-left">
<h3 className="font-size-15">Welcome Back !</h3>
<p>Sign in to continue</p>
</div>
<div className="col align-self-end">
<img
alt="welcome back"
style={{ maxWidth: "100%" }}
src={`${process.env.PUBLIC_URL}/welcome-back.png`}
/>
</div>
</div>
<div
className="position-absolute"
style={{ bottom: -36, left: 20 }}
>
<div
style={{
backgroundColor: "rgb(239, 242, 247)",
width: 72,
height: 72,
}}
className="rounded-circle d-flex align-items-center justify-content-center"
>
<Logo width={34} height={34} />
</div>
</div>
</div>
<form
className="bg-white text-left px-4"
style={{
paddingTop: 58,
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
}}
onSubmit={onSubmit}
>
<label className="font-size-12">Name</label>
<div className="username-select mb-3">
<UsernameSelect
username={username}
setUsername={setUsername}
names={DEMO_USERS}
/>
</div>
<label htmlFor="inputPassword" className="font-size-12">
Password
</label>
<input
value={password}
onChange={(event) => setPassword(event.target.value)}
type="password"
id="inputPassword"
className="form-control"
placeholder="Password"
required
/>
<div style={{ height: 30 }} />
<button className="btn btn-lg btn-primary btn-block" type="submit">
Sign in
</button>
<div className="login-error-anchor">
<div className="toast-box">
<Toast
style={{ minWidth: 277 }}
onClose={() => setError(null)}
show={error !== null}
delay={3000}
autohide
>
<Toast.Header>
<img
src="holder.js/20x20?text=%20"
className="rounded mr-2"
alt=""
/>
<strong className="mr-auto">Error</strong>
</Toast.Header>
<Toast.Body>{error}</Toast.Body>
</Toast>
</div>
</div>
<div style={{ height: 30 }} />
</form>
</div>
</div>
</>
);
}
Example #5
| Source File: index.jsx From basic-redis-chat-demo-go with MIT License | 4 votes |
|
export default function Login({ onLogIn,setShowLogin }) {
const [username, setUsername] = useState(
() => DEMO_USERS[Math.floor(Math.random() * DEMO_USERS.length)]
);
const [password, setPassword] = useState("password123");
const [error, setError] = useState(null);
const onSubmit = async (event) => {
event.preventDefault();
onLogIn(username, password, setShowLogin);
};
return (
<>
<div className="login-form text-center login-page">
<div
className="rounded"
style={{
boxShadow: "0 0.75rem 1.5rem rgba(18,38,63,.03)",
}}
>
<div className="position-relative">
<div
className="row no-gutters align-items-center"
style={{
maxWidth: 400,
backgroundColor: "rgba(85, 110, 230, 0.25)",
paddingLeft: 20,
paddingRight: 20,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
}}
>
<div className="col text-primary text-left">
<h3 className="font-size-15">Welcome Back !</h3>
<p>Sign in to continue</p>
</div>
<div className="col align-self-end">
<img
alt="welcome back"
style={{ maxWidth: "100%" }}
src={`${process.env.PUBLIC_URL}/welcome-back.png`}
/>
</div>
</div>
<div
className="position-absolute"
style={{ bottom: -36, left: 20 }}
>
<div
style={{
backgroundColor: "rgb(239, 242, 247)",
width: 72,
height: 72,
}}
className="rounded-circle d-flex align-items-center justify-content-center"
>
<Logo width={34} height={34} />
</div>
</div>
</div>
<form
className="bg-white text-left px-4"
style={{
paddingTop: 58,
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
}}
onSubmit={onSubmit}
>
<label className="font-size-12">Name</label>
<div className="username-select mb-3">
<UsernameSelect
username={username}
setUsername={setUsername}
names={DEMO_USERS}
/>
</div>
<label htmlFor="inputPassword" className="font-size-12">
Password
</label>
<input
value={password}
onChange={(event) => setPassword(event.target.value)}
type="password"
id="inputPassword"
className="form-control"
placeholder="Password"
required
/>
<div style={{ height: 30 }} />
<button className="btn btn-lg btn-primary btn-block" type="submit">
Sign in
</button>
<div className="login-error-anchor">
<div className="toast-box">
<Toast
style={{ minWidth: 277 }}
onClose={() => setError(null)}
show={error !== null}
delay={3000}
autohide
>
<Toast.Header>
<img
src="holder.js/20x20?text=%20"
className="rounded mr-2"
alt=""
/>
<strong className="mr-auto">Error</strong>
</Toast.Header>
<Toast.Body>{error}</Toast.Body>
</Toast>
</div>
</div>
<div style={{ height: 30 }} />
</form>
</div>
</div>
</>
);
}
