The login partial of ftc-header. It is the react version.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Aug 16, 2018Apr 14, 2018Minified + gzip package size for @ftchinese/ftc-login-react in KB



The login component for FTC. React version. It is a part of ftc-header-react.


cd yourProject
npm install react react-dom prop-types
npm install "@ftchinese/ftc-login-react" --save 



import Login from '@ftchinese/ftc-login-react';
import React from 'react';
import ReactDOM from 'react-dom';

  <Login postUrl="/users/login" findPasswordUrl="http://www.ftchinese.com/users/findpassword" registerUrl="http://user.ftchinese.com/register" />,

Props of Login

You can know about it by the proptypes:

static propTypes = {
  accountType: PropTypes.oneOf(['email', 'username', 'both']).isRequired,
  postUrl: PropTypes.string.isRequired,
  findPasswordUrl: PropTypes.string,
  registerUrl: PropTypes.string,
  closeFunc: PropTypes.func,
  show: PropTypes.bool,
  validateFailed: PropTypes.bool



Type string. Required. Default 'email'. The type of the account, which can be one of 'email', 'username', 'both'.


Type string. Required. The url for posting data when clicking the 'submit' button.


Type string. Optional.The url of the page for finding password.


Type string. Optional.The url of the page for new user's registering.


Type Function. Optional. Default null.

It decide this component is a smart or dumb.

If it is null, the component is smart and the show prop only decides the initial showing or hiding of the component. And when clicking the cross on the right left of the window or clicking the gray background, the build-in function closeOverlay of the component will be called.

Otherwise, if it is not null, the component is dumb and the show prop totally decides the showing or hiding of the component. The closeFunc will be a function provided by the parent component and change the state of the parent, then the show prop will be changed according to the state of the parent. And the closeFunc is called when clicking the close button on the right left of the login window or the gray background.


Type Boolean.Optional. Default true. Only decides to show the login window or not initally when where is no closeFunc. However, it totally decides the showing or hiding of the component when there is closeFunc. More details see above closeFunc


Type Boolean.Optional.If it is true, it will show the err infomation for validating failed. The information word is '用户不存在或密码错误'.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.