A Component for Kakaotalk Login

React Kakaotalk Login

A Component for Kakaotalk Login.

Getting Started

$ cd /PROJECT/PATH
$ npm i -S react react-dom react-kakao-login

Development

$ npm run demo

- Open [localhost:8888](http://localhost:8888)

Production Bundle

$ npm run bundle

Parameters

Parameter	Type	Remarks
jsKey	string	Required
onSuccess	function	Required
onFailure	function	Required
version	string	One of [v1, v2]. default is v2
getProfile	bool	If you want to get User's information, set TRUE
useDefaultStyle	bool	Optional
buttonText	string	Optional
className	string	Optional
render	function	Optional

How to use?

import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import KakaoLogin from '../src';

const key = '4a5607f2dc1622d91b7137fff35a464d';

const success = (response) => {
  console.log(response);
};

const failure = (error) => {
  console.log(error);
};

const appRoot = document.getElementById('react-kakao-login');

const Italic = styled.i`
  color: #3c1e1e;
  font-size: 20px;
  font-weight: 700;
`;

const StyledKakaoLogin = styled(KakaoLogin)`
  display: inline-block;
  padding: 0;
  width: 222px;
  height: 49px;
  line-height: 49px;
  color: #3C1E1E;
  background-color: #FFEB00;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 16px;
  text-align: center;
`;

ReactDOM.render(
  <Fragment>
    <p><code>No options</code></p>
    <KakaoLogin
      jsKey={key}
      onSuccess={success}
      onFailure={failure}
    />
    <p>Change button text with <code>buttonText</code></p>
    <KakaoLogin
      jsKey={key}
      onSuccess={success}
      onFailure={failure}
      buttonText="Button Text"
    />
    <p>Use style that is defined in KakaoLogin component with <code>useDefaultStyle</code></p>
    <KakaoLogin
      jsKey={key}
      onSuccess={success}
      onFailure={failure}
      useDefaultStyle
    />
    <p>Pass component that is styled as <code>children</code></p>
    <KakaoLogin
      jsKey={key}
      onSuccess={success}
      onFailure={failure}
    >
      <Italic>Children</Italic>
    </KakaoLogin>
    <p>Pass <code>className</code> to style component</p>
    <KakaoLogin
      jsKey={key}
      onSuccess={success}
      onFailure={failure}
      className="css-with-class"
    />
    <p>Pass <code>render</code> function to render fully customized component</p>
    <KakaoLogin
      jsKey={key}
      onSuccess={success}
      onFailure={failure}
      render={props => (
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault();
            props.onClick();
          }}
        >
          Render Prop
        </a>
      )}
    />
    <p>Use <code>third party</code>, like <code>styled-components</code></p>
    <StyledKakaoLogin
      jsKey={key}
      onSuccess={success}
      onFailure={failure}
    />
  </Fragment>, appRoot
);

GitHub