epaew
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-liffto your app dependencies.npm i --save @line/liff react-liff # or yarn add @line/liff react-liff Import
react-liffto 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
- Create your React application development environment.
- e.g.
npx create-react-app app-name
- e.g.
- Add
react-liffto your app dependencies.npm i --save react-liff # or yarn add react-liff - Update
index.htmlto 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-liffto 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
- See the API reference of
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.
- Callback function that fires after
LiffConsumer / useLiff return values
error:unknown(isLiffError | undefinedin many cases)- Returns an error if
liff.init()was failed.
- Returns an error if
isLoggedIn:boolean- Returns whether the user is logged in.
isReady:boolean- Returns
trueafterliff.init()has successfully completed. Otherwise, returnsfalse.
- Returns
liff:Liff- Returns liff object.