Using Facebook button without styling with TypeScript

[gmarokov]

Hello, I try to use custom rendering for the button, and I use TypeScript. I did import the module import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props' and created customType under @types/facebook-login-render-props/index.d.ts with just empty declaration. It quite did the trick but the renderProps.onClick is not called at all with correct properties. How is the proper way of doing it? Thanks in advance!

[JofBigHealth]

Here's how we did it. Might not be the best approach for you, but works for us

I module aliased the file in my babel config:

module.exports = function(api) {

  return {
    plugins: [
      [
        'module-resolver',
        {
          alias: {
            'react-facebook-login':  'react-facebook-login/dist/facebook-login-render-props',
          },
        },
      ],
    ],
  };

And then in my project's react-facebook-login.d.ts:

import 'react-facebook-login';

import * as React from 'react';
import { ReactFacebookLoginProps } from 'react-facebook-login';

declare module 'react-facebook-login' {
  import { ReactFacebookLoginProps } from 'react-facebook-login';

  export interface ReactFacebookLoginProps {
    render: React.FC<{ onClick: () => void }>;
  }
}

You can then do with onClick etc whatever you please.

[Dalez]

This seems to still be a problem. I tried the above suggestion but I couldn't get it to work.

Has anyone been able to create a declaration file for the props only version? I've tried a few times on my own project, but haven't been able to get any to work :(

[icrona]

this works for me include "global.d.ts" on tsconfig.json

1. global.d.ts

   declare module 'react-facebook-login/dist/facebook-login-render-props';

2. Compenent.tsx

   
   import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props';

const FacebookLoginButton = () => { const loginButton = (renderProps: { onClick: () => void }) => { return ( //your button ) }

    return (
        <FacebookLogin
            render={loginButton} />
     );

}

[Tokenyet]

For someone who has struggle to use this package with Typescript, I found a fork that sloved this issue. Just install the typed-render-prop branch, and enjoy the customization.

[guilhermeferrer]

For someone who has struggle to use this package with Typescript, I found a fork that sloved this issue. Just install the typed-render-prop branch, and enjoy the customization.

Thanks, the bellow yarn command did the trick for me.

yarn add vViktorPL/react-facebook-login#typed-render-prop