Permudahkan Log Masuk Facebook di React dengan react-fb-login-btn

Hello semua,

Saya ingin berkongsi dengan anda komponen React baharu yang dipanggil react-fb-login-btn. Ia membantu anda menambahkan log masuk Facebook pada aplikasi React anda dengan mudah.

pengenalan

Menambah log masuk Facebook pada apl anda kadangkala sukar. Dengan react-fb-login-btn, anda boleh melakukannya dengan cara yang mudah. Komponen ini dibina dengan TypeScript dan Tailwind CSS. Ia membolehkan anda menyesuaikan butang agar sesuai dengan reka bentuk apl anda.

Mengapa Gunakan react-fb-login-btn?

• Mudah Digunakan: Anda tidak perlu berurusan dengan SDK Facebook secara langsung.
• Boleh disesuaikan: Tukar rupa butang agar sepadan dengan apl anda.
• Sokongan TypeScript: Ia menggunakan TypeScript untuk kualiti kod yang lebih baik.
• Mengendalikan Acara: Mudah mengendalikan kejayaan atau kegagalan log masuk.
• Menyokong RTL: Berfungsi dengan bahasa yang kanan ke kiri.

Pemasangan

Anda boleh memasangnya menggunakan npm:

npm install react-fb-login-btn

Atau dengan benang:

yarn add react-fb-login-btn

Penggunaan Asas

Mula-mula, import komponen ke dalam projek anda:

import React from 'react';
import { FacebookLoginButton } from 'react-fb-login-btn';

const App = () => {
  const handleSuccess = (response) => {
    console.log('Login successful:', response);
    // Handle successful login here
  };

  const handleFailure = (error) => {
    console.error('Login failed:', error);
    // Handle login failure here
  };

  return (
    <div>
      <facebookloginbutton appid="YOUR_FACEBOOK_APP_ID" onsuccess="{handleSuccess}" onfail="{handleFailure}"></facebookloginbutton>
    </div>
  );
};

export default App;

Nota: Gantikan "ID_APP_FACEBOOK_ANDA" dengan ID Apl Facebook anda yang sebenar. Anda boleh mendapatkannya daripada tapak web Pembangun Facebook.

Pilihan Penyesuaian

Button FacebookLogin mempunyai beberapa prop untuk menyesuaikannya:

• appId (rentetan, diperlukan): ID Apl Facebook anda.
• onSuccess (fungsi): Dipanggil apabila log masuk berjaya.
• onFail (fungsi): Dipanggil apabila log masuk gagal.
• bentuk (rentetan): 'segi empat tepat' atau 'bulatan'. Lalai ialah 'segi empat tepat'.
• tema (rentetan): 'biru', 'gelap', 'terang' atau 'tersuai'. Lalai ialah 'biru'.
• teks (rentetan): Teks pada butang. Lalai ialah 'Log Masuk dengan Facebook'.
• skop (rentetan): Kebenaran yang ingin anda minta. Lalai ialah 'public_profile,email'.

Lagi Contoh

Untuk melihat lebih banyak contoh dan cara menyesuaikan butang, sila lawati dokumentasi Buku Cerita kami.

Saya harap anda mendapati ia berguna!

Maklum Balas dan Sumbangan

Jika anda mempunyai sebarang soalan atau cadangan, sila lawati repositori GitHub. Sumbangan dialu-alukan!

Terima kasih kerana membaca!

Atas ialah kandungan terperinci Permudahkan Log Masuk Facebook di React dengan react-fb-login-btn. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!