Realert

Sweet simple JavaScript alert alternative for React built with styled-components

Table of contents

• Demo
• Installation
• Usage
• API documentation
• Contributing guide
• License

Demo

Check out the demo

Installation

using npm

npm install @zakariaharti/realert --save

using yarn

yarn add @zakariaharti/realert

Usage

Follow this simple steps to integrate realert to your application.

Integrate Alert React component

import React from 'react';
import Alert from '@zakariaharti/realert';

class MyComponent extends React.Component{
  state = {
   isOpen: false,
   alertData: {
     title: "this is title",
     content: "this is content",
     level: "this is level",
     icon: "",
     allowHTML: false,
   }
  };

  myRef = React.createRef();

  close = () => this.myRef.current.close();

  open = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }

  render(){
    return(
      <div>
        <button onClick={this.open()}>click me!</button>
        <div>
          <Alert
            ref={this.myRef}
            isOpen={this.state.isOpen}
            {...this.state.alertData}
          />
        </div>
     </div>
  );
}
}

API Documentation

• Objects
  • Alert
  • Alert button
• Customize styling

Objects

Alert

| Property | Type | Default | Description | | ------------ | ---------------- | ------- | ----------- | | isOpen | Boolean | false | this prop is the only required . use it to open or close the Alert component | | title | String | | Title of the Alert. it can be text or custom HTML if allowHTML is true | | content | String | | content of the Alert, it can be text or custom HTML if allowHTML is true | | icon | null | null | display an icon available options : info, success, warning, error.| | buttons | Array | | Array of buttons objects. | | alignButtons | string | | align buttons . options : center, left, right. | onAdd | Function | | Function executed at component lifecycle : componentDidMount | | onRemove | Function | | Function executed at component lifecycle : componentWillUnmount | | allowHTML | Boolean | false | Allow HTML in title and message of the notification | | overlayStyles | string | | add custom styles to the overlay html div. | containerStyles | string | | add custom styles to the overlay html div. | contentStyles | string | | add custom styles to the content of the alert. | titleStyles | string | | add custom styles to the title of the alert. | buttonStyles | string | | add custom styles to the button of the alert. | footerStyles | string | | add custom styles to the footer html div.

Alert button

| Property | Type | Default | Description | | ------------ | :------: | :-----: | ----------- | | label | String | | Title of the button | | type | String | | type of the button . 'comfirm', 'cancel', 'danger' | | action | Function | | Function executed when user click on it |

Customize styling

example

import React from 'react';
import Alert from '@zakariaharti/realert';

class MyComponent extends React.Component{
  state = {
   isOpen: false,
   alertData: {
     icon: "success",
     title: "this is title",
     content: "this is content",
     level: "this is level",
     icon: "",
     allowHTML: false,
     overlayStyles: `
       background: green
     `,
     containerStyles: `
       background-color: red;
       display: flex;
     `,
     titleStyles: `
       color: green;
     `,
     contentStyles: `
       color: yellow;
     `,
     buttonStyles: `
       color: red;
       background: white;
       padding: 10px 25px;

       &:hover{
         background: green;
       }
     `
   }
  };

  myRef = React.createRef();

  close = () => this.myRef.current.close();

  open = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }

  render(){
    return(
      <div>
        <button onClick={this.open()}>click me!</button>
        <div>
          <Alert
            ref={this.myRef}
            isOpen={this.state.isOpen}
            {...this.state.alertData}
          />
        </div>
     </div>
  );
}
}

Contributing guide

All kinds of contributions (enhancements, new features, stories, documentation & bugs reporting) are welcome.

Setting up your environment

# clone repository
https://github.com/zakariaharti/realert.git

cd realert

# install dependencies

** yarn **
yarn install

** npm **
npm install

# Launch demo at http://localhost:6006
npm start

Here is the list of the available npm scripts :

| npm run <script> | Description | | -------------------- | ----------- | | storybook | Launch demo at http://localhost:6006 | | test | Run tests with jest | | test:coverage | Run tests with jest and generate coverage report (HTML and LCOV) | | build | run build for production env | | build-storybook | build stories and generate a static files ready for deployment |

Example :

npm run compile

Pull requests

All pull requests must be done on the master branch.

Before a pull request :

• Don't forget to update README or documentation if it's necessary
• Check code status with npm run webpack
• Run tests with npm run test
• If you made styles changes or any changes related to user interfaces, launch demo with npm start to check the result in the browser. Check it on all possible browsers that you have. (Precise the list in the PR)

License

realert is under MIT License