Popularity
0.3
Declining
Activity
0.0
Declining
0
1
0

Description

it is delightfully made without gimmick. it can be render anywhere in any function or event but not as a function but as a component which allow you to use customize component as templates.

Monthly Downloads: 0
Programming language: CSS
License: MIT License

myt-react-notify alternatives and similar libraries

Based on the "Notification" category.
Alternatively, view myt-react-notify alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of myt-react-notify or a related project?

Add another 'Notification' Library

README

github npm yarn bundlephobia

myt-react-notify

This react notification library is a gold. It is easy to use and undestand because it is uniquely engineered and it don`t need a complicated set-up for container and trigger like the majority does. This library set-up feels normal component and handy to understand which makes it unique, it can be render in any functions as component which allow developer to use customize component as templates. and plus it is just 6kb gzip minified, it is so light it can make the tree shaking and feather flying with no regrets.

installation

npm

npm i myt-react-notify

yarn

yarn add myt-react-notify

visit playground ๐Ÿ‘‰ Edit notification machine

How to use

import to your project

import { Notification, Render, RenderHasId } from 'myt-react-notify';

Normal Usage

Notification has a default template stylesheet that can be use/imported when using template option, if not using template and use your own template don`t import it. Edit myt-react-notify-usage

import "myt-react-notify/template.css"
<button className="btn" onClick={() => {
  Render(
    <Notification 
      template={{
        title: "success!",
        message: "myt react notify",
        variant: "success",
        dismissible: false,
      }}
      delay={4000}
    />
  );  
}}>
Show Notification
</button>

Customize Template Usage

You can make template of your own. Edit myt-react-notify-usage

import { Alert, Button } from 'react-bootstrap';
<Button
    onClick={() => {
        Render(
            <Notification placement='bottom-left'>
                {(notificationShow) => (
                    <Alert
                        variant='danger'
                        dismissible
                        onClose={() => notificationShow(false)}>
                        <Alert.Heading>Oh snap!!</Alert.Heading>
                        <p>I can use bootstrap</p>
                    </Alert>
                )}
            </Notification>
        );
    }}>
    Show Alert
</Button>

Animation Usage

You can use a custom animation class using @keyframe for this component. animate.css for cool animations. Edit myt-react-notify-usage

<button
    className='btn'
    onClick={() => {
        Render(
            <Notification
                template={{
                    title: 'Animated!',
                    message: 'that is so cool',
                    variant: 'primary',
                    dismissible: false
                }}
                animation={{
                    enter: 'animated bounceInLeft',
                    exit: 'animated fadeOutDown'
                }}
                timing={1000}
                delay={4000}
            />
        );
    }}>
    Show Animated Notification
</button>

Remaining Notification Usage

You can remove the timeout of the notification by setting delay as 0. Edit myt-react-notify-usage

<button
    className='btn'
    onClick={() => {
        Render(
            <Notification
                template={{
                    title: 'Hey!',
                    message: 'I`m not closing unless ๐Ÿ‘‰',
                    variant: 'warning',
                    dismissible: true
                }}
                animation={{
                    enter: 'animated bounceInLeft',
                    exit: 'animated fadeOutDown'
                }}
                timing={1000}
                delay={0}
            />
        );
    }}>
    Show No Timeout Notification
</button>

Customize Default Template Usage

You can customize the default template as well. Edit myt-react-notify-usage

<button
    className='btn'
    onClick={() => {
        Render(
            <Notification
                template={{
                    message: (
                        <a
                            href='https://codesandbox.io/s/notification-machine-rql5k?fontsize=14&hidenavigation=1&theme=dark'
                            target='_blanks'
                            style={{ textDecoration: 'none' }}>
                            <div>
                                <img
                                    src='https://avatars0.githubusercontent.com/u/28913097?v=4'
                                    alt='beard'
                                    width='20%'
                                />
                                <span style={{ padding: '10px 15px' }}>hey check me out</span>
                            </div>
                        </a>
                    ),
                    variant: 'primary',
                    dismissible: true
                }}
                animation={{
                    enter: 'animated bounceInLeft',
                    exit: 'animated fadeOutDown'
                }}
                timing={1000}
                delay={4000}
            />
        );
    }}>
    Customize Default Template
</button>

Updating Notification Usage

You can update or change notification anytime and anywhere using id which must be unique. but cannot be updated the Notification property timing, placement and delay. Edit myt-react-notify-usage

<button
    className='btn'
    onClick={() => {
        Render(
            <Notification
                id='notify'
                template={{
                    title: 'Hey!',
                    message: 'what is up?',
                    variant: 'primary'
                }}
                onEntered={() =>
                    Render(
                        <Notification
                            id='notify'
                            template={{
                                title: 'Pal!',
                                message: 'wooow I can change',
                                variant: 'success'
                            }}
                        />
                    )
                }
                onExit={() =>
                    Render(
                        <Notification
                            id='notify'
                            template={{
                                title: 'Yo!',
                                message: "I'am going now bye",
                                variant: 'danger'
                            }}
                        />
                    )
                }
            />
        );
    }}>
    Updating Notification
</button>

Cancel Notification Usage

You can close or cancel immidiately notification by updating the identified notification cancel as true. Edit myt-react-notify-usage

<button className="btn" onClick={() => {
  Render(
    <Notification
      id="persistent"
      template={{
        title: "Hey!",
        message: "I`m not closing unless you cancel",
        variant: "warning",
        dismissible: false,
      }}
      animation={{
        enter: "animated bounceInLeft",
        exit: "animated fadeOutDown"
      }}
      timing={1000}
      delay={0}
    />
  );
}}>
Persistent Notification
</button>
<button className="btn" onClick={() => {
  Render(
    <Notification
      id="persistent"
      cancel={true}
    />
  );
}}>
Cancel
</button>

RenderHasId Usage

You can check the identified notification if it is already rendered. Edit myt-react-notify-usage

<button
    className='btn'
    onClick={() => {
        Render(
            RenderHasId('check-me') ? (
                <Notification
                    id='check-me'
                    template={{
                        title: 'Heeee..',
                        message: 'I`m already rendered',
                        variant: 'danger',
                        dismissible: true
                    }}
                />
            ) : (
                <Notification
                    id='check-me'
                    template={{
                        title: 'Yo!',
                        message: 'I just got rendered',
                        variant: 'success',
                        dismissible: false
                    }}
                    delay={0}
                />
            )
        );
    }}>
    Click Again If Rendered
</button>

PROPERTIES

All properties that is supported by Notification Component. The datatypes with "*" means it is required.

PROPERTY DATATYPES DEFAULT DESCRIPTION
id string   It is to identify the notification you want to update and cancel
template {  title: string,   message: string,   variant: "success"    \ "primary"    \ "warning"    \
animation object   you can set a customize animations. default { enter: "fade-notify-in", exit: "fade-notify-out" }
timing number 1000 It is the duration of each animation
delay number 5000 It is the duration of notification will last. if the delay is set 0 it will remain forever unless dismiss
placement top-left\ top-right\ bottom-left\
children function   It enables you to make a customize template
cancel boolean false It is to cancel or close the certain identified or with id notification
onEnter function   it is invoke when the animation is started to enter
onEntering function   it is invoke when the animation is entering
onEntered function   it is invoke when the animation is fully entered
onExit function   it is invoke when the animation is started to exit
onExiting function   it is invoke when the animation is exiting
onExited function   it is invoke when the animation is fully exited
onMounted function   it is invoke when the component is mounted

Specials

you can remove notification in mobile using swipe from left to right.

License

MIT Licensed. Copyright (c) Mytabworks 2020.


*Note that all licence references and agreements mentioned in the myt-react-notify README section above are relevant to that project's source code only.