https://github.com/epaew/react-liff
A react context provider for LIFF (LINE Front-end Framework)
https://github.com/epaew/react-liff
liff line react react-component typescript
Last synced: 12 months ago
JSON representation
A react context provider for LIFF (LINE Front-end Framework)
- Host: GitHub
- URL: https://github.com/epaew/react-liff
- Owner: epaew
- License: mit
- Created: 2020-06-11T20:17:18.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-06T14:48:16.000Z (about 2 years ago)
- Last Synced: 2025-05-21T04:51:26.533Z (about 1 year ago)
- Topics: liff, line, react, react-component, typescript
- Language: TypeScript
- Homepage:
- Size: 7.91 MB
- Stars: 37
- Watchers: 5
- Forks: 8
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-liff
[](https://badge.fury.io/js/react-liff)
[](https://github.com/epaew/react-liff/actions?query=workflow%3A%22Run+Tests%22+branch%3A%22master%22)
[](https://codeclimate.com/github/epaew/react-liff/maintainability)
A react context provider for LIFF (LINE Front-end Framework)
## Requirements
- [React](https://reactjs.org/) v18.0 or later
- React Native is not supported.
- [LIFF SDK](https://developers.line.biz/en/docs/liff/release-notes/#liff-version-and-release-date) 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.
```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.
;
if (!isReady) return Loading...
;
if (!isLoggedIn) {
return (
Login
);
}
return (
<>
Welcome to the react-liff demo app, {displayName}!
Logout
>
);
};
return (
{showDisplayName()}
);
};
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')
);
```
### 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.
```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
### 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`, 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.
### 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](./CHANGELOG.md)
## LICENSE
[MIT](./LICENSE)