Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ReactJS - Custom Toast Messages Component
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import React, { useState } from 'react';
import HomeContainer from '../components/HomeContainer';
import PageFooter from '../components/PageFooter';
import PageHeader from '../components/PageHeader';
import './Home.css';
import Toast from '../components/utilities/Toast';
const Home: React.FC = () => {
const [authenticated, setKey] = useState(false);
const handleLogin = (authenticated:boolean) => {
authenticated = true;
setKey(authenticated);
showToast(true);
}
const handleLogout = (authenticated:boolean) => {
authenticated = false;
setKey(authenticated);
}
const [openToast, showToast] = useState(false);
return (
<IonPage>
<PageHeader authenticated={authenticated} handleLogout={handleLogout} handleLogin={handleLogin}> </PageHeader>
<IonContent fullscreen color="medium">
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large" className="ion-text-center">React CMS</IonTitle>
</IonToolbar>
</IonHeader>
<Toast
isOpen={openToast}
position = 'top'
onDidDismiss={() => showToast(false)}
message="Login is not implemented."
duration={6000}
/>
<HomeContainer />
</IonContent>
<PageFooter></PageFooter>
</IonPage>
);
};
export default Home;
/**
* Title: Custom, reusable Toast message component
* Author: Kingsley Tagbo / https://github.com/kingsleytagbo
*/
import React from 'react';
import { IonToast } from '@ionic/react';
type props = {
isOpen?: boolean;
position?: any;
onDidDismiss: any;
message: any;
duration?: number;
}
const Toast: React.FC<props> = ({ ...props }) => {
const params = {
isOpen: props.isOpen || false,
position: props.position || 'bottom',
onDidDismiss: props.onDidDismiss,
message: props.message,
duration: props.duration || 20000
};
return (
<IonToast
{...params}
>
</IonToast>
);
};
export default Toast;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment