@salocreative/alerts

    0.5.1 • Public • Published

    Alert

    Alerts can be used in complete isolation but are designed to be used inside an alerts wrapper/provider to allow simplified state management.


    Usage

    Install

    yarn add @salocreative/alerts
    
    import { Alert } from '@salocreative/alerts';
    <Alert
      // Prop containing an alert object
      alert={ {
        message: 'My alert message goes here',
        dismissible={ true },
        time={ 10 },
        type='success',
        id={ 213 }
      } }
     
      // Pass in function to clear the alert
      clearAlert={ (id) => this.clearAlert(id) }
     
      // Pass in function to clear alert after set time
      setAlertClear={ (id, time) => this.timeOutAlert(id, time) }
    />

    AlertsContainer

    The alerts container can be used to easily encapsulate multiple alert messages in you your app where you wish to manage your own context or integrate with another system such as react.


    Usage

    Install

    yarn add @salocreative/alerts
    
    import { AlertsContainer } from '@salocreative/alerts';
    <AlertsContainer
      topOffset={ 140 }
      closeIcon={ <span>X</span> }
      colours={ {
        error: '#D0021B',
        warning: '#F6A623',
        info: '#8F8F8F',
        success: '#00A44C'
      } }
      alerts={ [...{}] }
      clearAlert={ (id) => this.clearAlert(id) }
      setAlertClear={ (id, time) => this.timeOutAlert(id, time) }
    />

    AlertProvider

    The alert provider uses the React context api to allow for state management of the alerts throughout your application. You can include the example provider at any level of your application and then the consumer can be placed anywhere in the tree below it. The consumer will have access to not only the alerts but also the methods for removing the alerts.


    Usage

    Install

    yarn add @salocreative/alerts
    
    import { AlertProvider, AlertConsumer } from '@salocreative/alerts';
    <AlertProvider>
      // ...My tree of components
      <AlertConsumer />
    </AlertProvider>

    Advanced usage

    In order to provide backwards compatibility for use with other state management such as redux it is possible to merge external arrays of alerts into the provider. The provider accepts an optional alerts prop. If an array of alerts is provided then the Provider will merge them into its state and then provide a callback so that redux can be updated to remove the items from its state to maintain a single source of truth. The callback will return and array of alert ids as provided to it (n.b. when alerts are mapped to state in the Provider their id's are changed but a ref to the original is maintained to prevent duplications).

    <AlertProvider
      alerts={ alerts }
      alertsMerged={ (alerts) => this.removeOriginalAlerts() }
    >
      // ...My tree of components
      <AlertConsumer />
    </AlertProvider>

    Consumer

    The AlertConsumer will pass down any props given to it to the AlertContainer component so you can pass in the following props for the AlertContainer at this level.

    • closeIcon
    • colours
    • topOffset

    e.g.

    <AlertProvider>
      <AlertConsumer
        colours={ { error: '#D0021B', warning: '#F6A623', info: '#8F8F8F', success: '#00A44C' } }
        topOffset={ 125 }
        closeIcon={ <span>X</span> }
      />
    </AlertProvider>

    Standalone consumer

    When using the AlertProvider there is no need to pass in the functions for removing the alerts or the AlertsContainer itself as these are already bundled into the Provider/Consumer. If you want to add alerts without adding an additional display then you can import the Consumer to your component directly and access the methods from there. e.g.

    import { Consumer as AlertsConsumer } from '@salocreative/alerts';
     
    <AlertsConsumer>
            { ({ alerts, deleteAlert, insertAlert }) => {
              // ...your code here
            } }

    Keywords

    none

    Install

    npm i @salocreative/alerts

    DownloadsWeekly Downloads

    59

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    614 kB

    Total Files

    55

    Last publish

    Collaborators

    • salocreative