keydown.tsx

<div
onKeyDown={R.compose(
  () => api.template(templates),
  enter => {
    if (enter) api.language('nn');
  },
  isEnter
)}
  />

login.tsx

import * as R from 'ramda';
import * as $ from 'baquery';
import * as React from 'react';

import { iOS } from '../../lib';
import { Spinner } from '../../components';

import api from './api';
import {
  Form,
  ForgottenPassword,
  MFA,
  MFASetup,
  MFAFinalize,
  Done
} from './components';

const App = props => {
  if (props.step === 'hide') return null;

  const step = R.cond([
    [R.equals('inputs'), () => <Form {...props} />],
    [R.equals('password'), () => <ForgottenPassword {...props} />],
    [R.equals('mfa-setup'), () => <MFASetup {...props} />],
    [R.equals('mfa-final'), () => <MFAFinalize {...props} />],
    [R.equals('mfa'), () => <MFA {...props} />],
    [R.equals('done'), () => <Done {...props} />],
    [R.equals('loading'), () => <Spinner />]
  ])(props.step);

  return (
    <div className="modal-container">
      <div className="modal">
        {step}
        <i
          className="icon icon-close click"
          onClick={R.compose(() => {
            if (iOS()) $('body').removeClass('ios-fix');
          }, api.reset)}
        />
      </div>
    </div>
  );
};

export default App;