{"id":19586393,"url":"https://github.com/epaew/react-liff","last_synced_at":"2025-07-01T05:04:11.320Z","repository":{"id":37020040,"uuid":"271638929","full_name":"epaew/react-liff","owner":"epaew","description":"A react context provider for LIFF (LINE Front-end Framework)","archived":false,"fork":false,"pushed_at":"2024-04-06T14:48:16.000Z","size":8298,"stargazers_count":37,"open_issues_count":8,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-21T04:51:26.533Z","etag":null,"topics":["liff","line","react","react-component","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/epaew.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-06-11T20:17:18.000Z","updated_at":"2025-05-17T14:31:40.000Z","dependencies_parsed_at":"2024-01-11T06:51:08.304Z","dependency_job_id":"52ba5d03-ad42-4216-964f-695b696d4af7","html_url":"https://github.com/epaew/react-liff","commit_stats":{"total_commits":548,"total_committers":4,"mean_commits":137.0,"dds":0.5145985401459854,"last_synced_commit":"1aa2ab4e09a6ce7101d25050efafdabdd4f3ed2a"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/epaew/react-liff","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epaew%2Freact-liff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epaew%2Freact-liff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epaew%2Freact-liff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epaew%2Freact-liff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epaew","download_url":"https://codeload.github.com/epaew/react-liff/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epaew%2Freact-liff/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261211684,"owners_count":23125543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["liff","line","react","react-component","typescript"],"created_at":"2024-11-11T07:59:37.020Z","updated_at":"2025-07-01T05:04:11.288Z","avatar_url":"https://github.com/epaew.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-liff\n\n[![npm version](https://badge.fury.io/js/react-liff.svg)](https://badge.fury.io/js/react-liff)\n[![Build Status](https://github.com/epaew/react-liff/workflows/Run%20Tests/badge.svg)](https://github.com/epaew/react-liff/actions?query=workflow%3A%22Run+Tests%22+branch%3A%22master%22)\n[![Maintainability](https://api.codeclimate.com/v1/badges/4ff4ef0a7a4343c6ae52/maintainability)](https://codeclimate.com/github/epaew/react-liff/maintainability)\n\nA react context provider for LIFF (LINE Front-end Framework)\n\n## Requirements\n\n- [React](https://reactjs.org/) v18.0 or later\n  - React Native is not supported.\n- [LIFF SDK](https://developers.line.biz/en/docs/liff/release-notes/#liff-version-and-release-date) version \u003e=2.19.1\n\n## Getting started\n\n### When you use NPM version of LIFF SDK (Recommended)\n\n1. Create your React application development environment.\n   - e.g. `npx create-react-app app-name`\n2. Add `react-liff` to your app dependencies.\n   ```sh\n   npm i --save @line/liff react-liff\n   # or\n   yarn add @line/liff react-liff\n   ```\n3. Import `react-liff` to your app and use it!\n\n   - An example of src/App.js\n\n     ```javascript\n     import React, { useEffect, useState } from 'react';\n     import { useLiff } from 'react-liff';\n\n     import './App.css';\n\n     const App = () =\u003e {\n       const [displayName, setDisplayName] = useState('');\n       const { error, isLoggedIn, isReady, liff } = useLiff();\n\n       useEffect(() =\u003e {\n         if (!isLoggedIn) return;\n\n         (async () =\u003e {\n           const profile = await liff.getProfile();\n           setDisplayName(profile.displayName);\n         })();\n       }, [liff, isLoggedIn]);\n\n       const showDisplayName = () =\u003e {\n         if (error) return \u003cp\u003eSomething is wrong.\u003c/p\u003e;\n         if (!isReady) return \u003cp\u003eLoading...\u003c/p\u003e;\n\n         if (!isLoggedIn) {\n           return (\n             \u003cbutton className=\"App-button\" onClick={liff.login}\u003e\n               Login\n             \u003c/button\u003e\n           );\n         }\n         return (\n           \u003c\u003e\n             \u003cp\u003eWelcome to the react-liff demo app, {displayName}!\u003c/p\u003e\n             \u003cbutton className=\"App-button\" onClick={liff.logout}\u003e\n               Logout\n             \u003c/button\u003e\n           \u003c/\u003e\n         );\n       };\n\n       return (\n         \u003cdiv className=\"App\"\u003e\n           \u003cheader className=\"App-header\"\u003e{showDisplayName()}\u003c/header\u003e\n         \u003c/div\u003e\n       );\n     };\n\n     export default App;\n     ```\n\n   - An example of src/index.js\n\n     ```javascript\n     import React from 'react';\n     import ReactDOM from 'react-dom';\n     import { LiffProvider } from 'react-liff';\n\n     import './index.css';\n     import App from './App';\n\n     const liffId = process.env.REACT_APP_LINE_LIFF_ID;\n\n     ReactDOM.render(\n       \u003cReact.StrictMode\u003e\n         \u003cLiffProvider liffId={liffId}\u003e\n           \u003cApp /\u003e\n         \u003c/LiffProvider\u003e\n       \u003c/React.StrictMode\u003e,\n       document.getElementById('root')\n     );\n     ```\n\n### When you use CDN version of LIFF SDK\n\n1. Create your React application development environment.\n   - e.g. `npx create-react-app app-name`\n2. Add `react-liff` to your app dependencies.\n   ```sh\n   npm i --save react-liff\n   # or\n   yarn add react-liff\n   ```\n3. Update `index.html` to load LIFF SDK\n   - https://developers.line.biz/en/docs/liff/developing-liff-apps/#developing-a-liff-app\n     ```diff\n     +    \u003cscript defer charset=\"utf-8\" src=\"https://static.line-scdn.net/liff/edge/2/sdk.js\"\u003e\u003c/script\u003e\n     ```\n4. Import `react-liff` to your app and use it!\n\n## API\n\n### LiffProvider props\n\n- `liffId`: `string`, required\n  - The ID of your LIFF application.\n- `withLoginOnExternalBrowser`: `boolean`, optional\n  - See the API reference of `liff.init()`. https://developers.line.biz/en/reference/liff/#initialize-liff-app-arguments\n- `plugins`: `Array\u003cLiffPlugin | [LiffPlugin, LiffPluginOption]\u003e`, optional\n  - List of LIFF plugin instances.\n  - If you need to pass option to plugin, you can use the list of tuple `[pluginInstance, pluginOption]`.\n- `callback`: `(liff: Liff) =\u003e Promise\u003cvoid\u003e`, optional\n  - Callback function that fires after `liff.init()` has been succeeded.\n\n### LiffConsumer / useLiff return values\n\n- `error`: `unknown` (is `LiffError | undefined` in many cases)\n  - Returns an error if `liff.init()` was failed.\n- `isLoggedIn`: `boolean`\n  - Returns whether the user is logged in.\n- `isReady`: `boolean`\n  - Returns `true` after `liff.init()` has successfully completed. Otherwise, returns `false`.\n- `liff`: `Liff`\n  - Returns liff object.\n\n## CHANGELOG\n\n[CHANGELOG](./CHANGELOG.md)\n\n## LICENSE\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepaew%2Freact-liff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepaew%2Freact-liff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepaew%2Freact-liff/lists"}