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

$3

1. Create your React application development environment.
- e.g. npx create-react-app app-name
2. Add react-liff to your app dependencies.
``sh
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

`javascript
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

Something is wrong.

export default App;
`

- An example of src/index.js

`javascript
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(




,
document.getElementById('root')
);
`

$3

1. Create your React application development environment.
- e.g. npx create-react-app app-name
2. Add react-liff to your app dependencies.
`sh
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
`diff
+
`
4. Import react-liff to your app and use it!

API

$3

- 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, 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, optional
- Callback function that fires after liff.init() has been succeeded.

$3

- 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