react-liff

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

Usage no npm install needed!

<script type="module">
  import reactLiff from 'https://cdn.skypack.dev/react-liff';
</script>

README

react-liff

npm version Build Status Maintainability

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

Requirements

  • React v16.14 or later
    • React Native is not supported.
  • LIFF SDK version >=2.9.0

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, liff, isLoggedIn, ready } = 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 (!ready) 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;
      const stubEnabled = process.env.NODE_ENV !== 'production';
      
      ReactDOM.render(
        <React.StrictMode>
          <LiffProvider liffId={liffId} stubEnabled={stubEnabled}>
            <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
  4. Import react-liff to your app and use it!

API

LiffProvider props

  • liffId: string, required
    • The ID of your LIFF application.
    • When you using stubs, you can specify empty string.
  • stubEnabled: boolean | Object | undefined, optional
    • false or undefined: Provider uses LIFF SDK (for Production).
    • true: Provider uses stubs defined in library.
    • Object: Provider uses the stubs you specified here.

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.
  • ready: boolean
    • Returns true after liff.init() or stub setup has successfully completed.
  • liff: Liff
    • Returns liff object.

CHANGELOG

CHANGELOG

LICENSE

MIT