README
react-liff
A react context provider for LIFF (LINE Front-end Framework)
Requirements
Getting started
When you use NPM version of LIFF SDK (Recommended)
Create your React application development environment.
- e.g.
npx create-react-app app-name
- e.g.
Add
react-liff
to your app dependencies.npm i --save @line/liff react-liff # or yarn add @line/liff react-liff
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
- Create your React application development environment.
- e.g.
npx create-react-app app-name
- e.g.
- Add
react-liff
to your app dependencies.npm i --save react-liff # or yarn add react-liff
- 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>
- https://developers.line.biz/en/docs/liff/developing-liff-apps/#developing-a-liff-app
- 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
, optionalfalse
orundefined
: Provider uses LIFF SDK (for Production).true
: Provider uses stubs defined in library.Object
: Provider uses the stubs you specified here.
withLoginOnExternalBrowser
:boolean
, optional- See the API reference of
liff.init()
. https://developers.line.biz/en/reference/liff/#initialize-liff-app-arguments
- See the API reference of
LiffConsumer / useLiff return values
error
:unknown
(isLiffError | undefined
in many cases)- Returns an error if
liff.init()
was failed.
- Returns an error if
isLoggedIn
:boolean
- Returns whether the user is logged in.
ready
:boolean
- Returns
true
afterliff.init()
or stub setup has successfully completed.
- Returns
liff
:Liff
- Returns liff object.