open-index/open-npm huggingface dataset:
npm package: @mobylogix/login-with-connectdex
Description: NPM package to login with Connectdex
Author: Mobylogix
Latest version: 0.1.3

## Props

<table border=1>
    <thead>
        <tr>
            <th>Function</th>
            <th>Required</th>
            <th>Params</th>
            <th>Description</th>
        </tr>
    </thead> <br/>
    <tbody>
        <tr>
            <td>onClick</td>
            <td>Yes</td>
            <td>data: Object</td>
            <td>Response will be passed to this function after login.</td>
        </tr>
        <tr>
            <td>title</td>
            <td>No</td>
            <td></td>
            <td>Display the custom text on button.</td>
        </tr>
    </tbody>
</table>

```

import React , {Component} from 'react';
import ConnectDexBtn from '@mobylogix/login-with-connectdex';

class ConnectDex extends Component {

    constructor(props) {
        super(props);
        
        this.state = {};
    }
    
    loginWithConnectDex(data) {
        console.log(data);
        
        // data object format
        {success, status, message, user}
    }

    render(){
        return <ConnectDexBtn onClick={this.loginWithConnectDex.bind(this)} />
    }

}

```
## Add this stylesheet in your app after installation

.main {
  width: 100%;
  display: flex;
  flex: 1;
  background-color: #dc0c0c;
}

.main-package {
  width: 100%;
  height: 100%;
  background-color: green;
}

.btnMain {
  width: 50%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
}

.modal-body {
  width: 100%;
  height: 100%;
}

.modal-header {
  display: flex;
  flex-direction: row;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 30px;
  width: 100%;
}

.component-rendering-main {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.login-main {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.register-main {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.text-field {
  margin-bottom: 28px;
  width: 100%;
  height: 20px;
  padding-left: 5px;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom-color: #4bd015;
  border-bottom-width: 0.5px;
  outline: none;
}

.form-btn {
  width: 100%;
  height: 30px;
  cursor: pointer;
  background-color: #4bd015;
}

.login-Btn {
  cursor: pointer;
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.register-Btn {
  cursor: pointer;
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.login-Btn:hover {
  border-bottom: 1px solid #4bd015;
}

.register-Btn:hover {
  border-bottom: 1px solid #4bd015;
}

.forgot-Pass {
  align-self: flex-start;
  color: #4bd015;
  font-size: 14px;
  cursor: pointer;
}

.passwords {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.logo {
  width: 280px;
}

.header-logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.alert {
  color: red;
}

.login-with-connectdex-btn {

}