projet-14-plugin v0.1.5

Getting Started

The projet-14-plugin as its name suggests, is a plugins developed as part of my OpenClassRooms training program. This plugin is not magic, this plugin does not make coffee, but if you want to have coffee with me we can make an arrangement 👌 We still haven't answered the question "but what does this plugin do" ... ... It's quite simply a React plugin allowing to display an alert, for more information go to the section "How the plugin works"

Installation

$ npm install --save projet-14-plugin
$ yarn add projet-14-plugin

How the plugin works

Import module:

import Alert, { AlertActions, AlertContent, AlertIcon, AlertTitle } from 'projet-14-plugin/dist'

Create your state in your component:

const [mySuperBrightAlert, setMySuperBrightAlert] = useState(false)

Render your alert in your component:

    return (
        <>
            <Alert name="my-super-bright-alert" show={mySuperBrightAlert} setShow={setMySuperBrightAlert}>
                <AlertIcon IconComponent={GreatStarSVG} color="info" />
                <AlertTitle>This is my super bright alert</AlertTitle>
                <AlertContent>Don't forget to follow me on my github account</AlertContent>
                <AlertActions>
                    <button type="button" onClick={() => setMySuperBrightAlert(false)}>It was famous</button>
                </AlertActions>
            </Alert>
        </>
    )

<Alert/> params:

• name: id of your alert title use to define Aria
• showClose: Boolean use to show or hide cross close button (true by default)
• show: Boolean state use to show and hide your alert
• setShow: function that updates your state

<AlertIcon/> params:

• IconComponent: svg component use inside alert icon Import your svg component as

  import { ReactComponent as GreatStarSVG } from '../assets/images/icons/great-star.svg'

• color: svg ring color base on Bootstrap colors ['primary', 'danger', 'warning', 'success', 'info'] ('primary' by default)

More about this plugin

To know more about this plugin or on my work, do not hesitate to contact me on my main networks Twitter - Linkedin - GitHub