epaew / react-liff

A react context provider for LIFF (LINE Front-end Framework)

react-liff

A react context provider for LIFF (LINE Front-end Framework)

Requirements

• React v18.0 or later
  • React Native is not supported.
• LIFF SDK version >=2.19.1

Getting started

When you use NPM version of LIFF SDK (Recommended)

1. Create your React application development environment.

   • e.g. npx create-react-app app-name

2. Add react-liff to your app dependencies.

   npm i --save @line/liff react-liff
   # or
   yarn add @line/liff react-liff

3. Import react-liff to your app and use it!

   • An example of src/App.js

     import React, { useEffect, useState } from 'react';
     import { useLiff } from 'react-liff';
     
     import './App.css';
     
     const App = () => {
       const [displayName, setDisplayName] = useState('');
       const { error, isLoggedIn, isReady, liff } = useLiff();
     
       useEffect(() => {
         if (!isLoggedIn) return;
     
         (async () => {
           const profile = await liff.getProfile();
           setDisplayName(profile.displayName);
         })();
       }, [liff, isLoggedIn]);
     
       const showDisplayName = () => {
         if (error) return <p>Something is wrong.</p>;
         if (!isReady) return <p>Loading...</p>;
     
         if (!isLoggedIn) {
           return (
             <button className="App-button" onClick={liff.login}>
               Login
             </button>
           );
         }
         return (
           <>
             <p>Welcome to the react-liff demo app, {displayName}!</p>
             <button className="App-button" onClick={liff.logout}>
               Logout
             </button>
           </>
         );
       };
     
       return (
         <div className="App">
           <header className="App-header">{showDisplayName()}</header>
         </div>
       );
     };
     
     export default App;

   • An example of src/index.js

     import React from 'react';
     import ReactDOM from 'react-dom';
     import { LiffProvider } from 'react-liff';
     
     import './index.css';
     import App from './App';
     
     const liffId = process.env.REACT_APP_LINE_LIFF_ID;
     
     ReactDOM.render(
       <React.StrictMode>
         <LiffProvider liffId={liffId}>
           <App />
         </LiffProvider>
       </React.StrictMode>,
       document.getElementById('root')
     );

When you use CDN version of LIFF SDK

1. Create your React application development environment.
   • e.g. npx create-react-app app-name
2. Add react-liff to your app dependencies.

   npm i --save react-liff
   # or
   yarn add react-liff

3. Update index.html to load LIFF SDK
   • https://developers.line.biz/en/docs/liff/developing-liff-apps/#developing-a-liff-app

     +    <script defer charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

4. Import react-liff to your app and use it!

API

LiffProvider props

• liffId: string, required
  • The ID of your LIFF application.
• withLoginOnExternalBrowser: boolean, optional
  • See the API reference of liff.init(). https://developers.line.biz/en/reference/liff/#initialize-liff-app-arguments
• plugins: Array<LiffPlugin | [LiffPlugin, LiffPluginOption]>, optional
  • List of LIFF plugin instances.
  • If you need to pass option to plugin, you can use the list of tuple [pluginInstance, pluginOption].
• callback: (liff: Liff) => Promise<void>, optional
  • Callback function that fires after liff.init() has been succeeded.

LiffConsumer / useLiff return values

• error: unknown (is LiffError | undefined in many cases)
  • Returns an error if liff.init() was failed.
• isLoggedIn: boolean
  • Returns whether the user is logged in.
• isReady: boolean
  • Returns true after liff.init() has successfully completed. Otherwise, returns false.
• liff: Liff
  • Returns liff object.

CHANGELOG

CHANGELOG

LICENSE

MIT

react-liff's Issues

Support fetching LIFF SDK from node_modules

LIFF SDK release note

https://developers.line.biz/ja/docs/liff/release-notes/#liff-sdk%E3%82%92npm%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%A8%E3%81%97%E3%81%A6%E5%85%AC%E9%96%8B%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F

Package details

• https://www.npmjs.com/package/@line/liff

TypeError: Cannot read properties of undefined (reading 'init')

Hi,
Thanks for the great package! The stubbing, and ease of use seem really interesting!! :)

I encounter an issue while following the README.md instruction.

Here is a repository to demo the issue with a blank create-react-app and the react-liff demo code.

The issue

Logging the Error object	UI

Insights

It seems to be the import of @line/liff is the issue:

The react-liff package is fully working when I change this line:
const liff = (_b = window.liff) !== null && _b !== void 0 ? _b : (yield Promise.resolve().then(() => __importStar(require('@line/liff')))).liff;
into
const liff = (_b = window.liff) !== null && _b !== void 0 ? _b : (yield Promise.resolve().then(() => __importStar(require('@line/liff'))));

As reference to the package source code, it corresponds to changing:
const liff = window.liff ?? (await import('@line/liff')).liff;
into
const liff = window.liff ?? (await import('@line/liff'));

(Context.tsx, l37)

I also noticed that the type declarations provided by the @line/liff package are somehow misleading as they enable both import { liff } from ... and import * as liff from ... from type checking while only the latter seems to work.

Please let me know if you have an idea of the solution, or if the suggested changes make sense to you :)

Many thanks for your support :)

Version 2.0

• Features
  • support for LIFF plugin
• Breaking changes
  • use official @line/liff-mock instead of my liff-stub
  • drop support for LIFF on CDN
  • drop support for React v16, v17
• Bugfixs
  • #424

Update README.md

• What is this
• Requirements
• How to use
• etc.