awesome-toasts
v0.1.3
Published
Create awesome toasts for your React Native app easily!
Downloads
11
Maintainers
Readme
awesome-toasts
Create awesome toasts for your React Native app easily!
Installation
npm install awesome-toasts
yarn add awesome-toasts
Usage
We highly recommend using typescript!
Create your Toast component
// components/Toast.tsx
import React from 'react';
import { Text, View } from 'react-native';
import tw from 'tailwind-rn';
type ToastProps = {
title?: string;
description: string;
};
export const Toast: React.FC<ToastProps> = ({ title, description }) => (
<View style={tw('px-3 py-4 m-4 bg-indigo-500 rounded-md')}>
<Text style={tw('font-bold text-white mb-1')}>{title}</Text>
<Text style={tw('text-white')}>{description}</Text>
</View>
);
Create your toasts hook
// hooks/toasts.ts
import { createUseToastsHook } from 'awesome-toasts';
import { Toast } from '../components/toast';
export const useToasts = createUseToastsHook<typeof Toast>();
Include the ToastsProvider in your App component
import React from 'react';
import { ToastsProvider } from 'awesome-toasts';
import { Toast } from './components/toast';
export function App() {
return (
<ToastsProvider component={Toast}>
{/* Your stuff goes here */}
</ToastsProvider>
);
}
And you are ready to show some awesome toasts!
const { showToast } = useToasts();
showToast({
props: {
title: 'Hey!',
description: 'These toasts are really awesome!',
},
duration: 4000, // ms
});
Toasts get dismissed after the duration time has passed. You can also dismiss it swiping it up!
Everything is correctly typed for a great developer experience ;)
Have fun!
TO-DO
- [ ] Bottom position support (In progess)
- [ ] Add tests
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT