@zakariaharti/realert v0.1.2

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

Alert button

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 :

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