The package can be used in .tsx and .jsx files, but there are a few considerations to ensure smooth integration:

1. TypeScript Integration in .tsx Files

If you’re using the package in a TypeScript project with .tsx files, you can import and use it directly as long as TypeScript is set up correctly:

import { initializeFacebookSDK, loginWithFacebookAction } from 'facebook-login-package';

// Initialize Facebook SDK
initializeFacebookSDK('YOUR_APP_ID');

// Login with Facebook
loginWithFacebookAction((userData) => {
  console.log('User data:', userData);
});

2. JavaScript Integration in .jsx Files

For JavaScript projects using .jsx files, TypeScript definition files (.d.ts) provide type information but do not affect runtime behavior. You can still import and use your package as follows:

import { initializeFacebookSDK, loginWithFacebookAction } from 'facebook-login-package';

// Initialize Facebook SDK
initializeFacebookSDK('YOUR_APP_ID');

// Login with Facebook
loginWithFacebookAction((userData) => {
  console.log('User data:', userData);
});

3. Ensure the Package is Usable

To make sure the package works correctly in both .tsx and .jsx files:

1. Export Functions Correctly: Make sure the functions you export are usable in both TypeScript and JavaScript contexts. Your current setup is fine for this.

2. Include Type Declarations: The dist/index.d.ts file you generate during the build process will provide TypeScript definitions. JavaScript projects don’t use these, but they’re essential for TypeScript projects.

3. Testing: Verify that the package works in both TypeScript and JavaScript projects. Create a test project for each scenario if needed to ensure compatibility.

4. Example Usage

Here's how you might use the package in a TypeScript and JavaScript environment:

TypeScript (.tsx)

import React, { useEffect } from 'react';
import { initializeFacebookSDK, loginWithFacebookAction } from 'facebook-login-package';

const App: React.FC = () => {
  useEffect(() => {
    initializeFacebookSDK('YOUR_APP_ID');
  }, []);

  const handleLogin = () => {
    loginWithFacebookAction((userData) => {
      console.log('User data:', userData);
    });
  };

  return (
    <div>
      <button onClick={handleLogin}>Login with Facebook</button>
    </div>
  );
};

export default App;

JavaScript (.jsx)

import React, { useEffect } from 'react';
import { initializeFacebookSDK, loginWithFacebookAction } from 'facebook-login-package';

const App = () => {
  useEffect(() => {
    initializeFacebookSDK('YOUR_APP_ID');
  }, []);

  const handleLogin = () => {
    loginWithFacebookAction((userData) => {
      console.log('User data:', userData);
    });
  };

  return (
    <div>
      <button onClick={handleLogin}>Login with Facebook</button>
    </div>
  );
};

export default App;