{"id":14971017,"url":"https://github.com/khw1031/withutterances","last_synced_at":"2025-10-26T14:30:55.585Z","repository":{"id":57398480,"uuid":"130744432","full_name":"khw1031/withUtterances","owner":"khw1031","description":"React HOC with 🔮Utterances Comment Widget Supported","archived":false,"fork":false,"pushed_at":"2019-09-17T17:52:21.000Z","size":25,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T20:16:08.610Z","etag":null,"topics":["comment","gatsbyjs","hoc","react","utterances"],"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/khw1031.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-23T19:12:44.000Z","updated_at":"2023-09-14T17:38:32.000Z","dependencies_parsed_at":"2022-08-29T15:20:56.176Z","dependency_job_id":null,"html_url":"https://github.com/khw1031/withUtterances","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khw1031%2FwithUtterances","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khw1031%2FwithUtterances/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khw1031%2FwithUtterances/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/khw1031%2FwithUtterances/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/khw1031","download_url":"https://codeload.github.com/khw1031/withUtterances/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238347426,"owners_count":19456930,"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":["comment","gatsbyjs","hoc","react","utterances"],"created_at":"2024-09-24T13:44:30.566Z","updated_at":"2025-10-26T14:30:55.283Z","avatar_url":"https://github.com/khw1031.png","language":"TypeScript","readme":"# React ❤️ [Utterances](https://github.com/utterance/utterances)\n\n**WithUtterances** is a React Higher-Order-Component for Super LightWeight Comments Widget named [Utterances](https://github.com/utterance/utterances).\n\n### No need Duplicated DOM Bindings for each react component.\n\n#### Just Wrap It!\n\n1. `import withUtterances from 'with-utterances'`\n2. Wrap your react component\n3. Pass your repo as a String\n4. Done!\n\n### Installation\n\n```sh\nnpm i with-utterances\nyarn add with-utterances\n```\n\n### Usage\n\nimport `withUtterances` to the file which has component that you want to show utterances comment widget.\n\n```jsx\nimport withUtterances from 'with-utterances'\n\n\nclass PostPage extends React.Component {\n    //...\n}\n\n// Or\n\nconst PostPage = () =\u003e {\n    //...\n}\n\nexport default withUtterances(PostPage, 'YOUR_REPO')\n\n// Or to specify a theme\n\nexport default withUtterances(PostPage, 'YOUR_REPO', 'github-dark')\n\n// Or to specfiy an issue term\n\nexport default withUtterances(PostPage, 'YOUR_REPO', 'github-light', 'og:title')\n\n\n// Or to specfiy label for newly created issues\nexport default withUtterances(PostPage, 'YOUR_REPO', 'github-light', 'og:title', 'comments')\n```\n\nIt uses your pathname as `issue-term`.\n\n#### Supported Themes\n\nBy default [Utterances](https://github.com/utterance/utterances) comes with 6 choices for themes:\n- `github-light` - The normal Github style\n- `github-dark` - A dark mode in the style of Github\n- `github-dark-orange` - A custom dark orange mode in the style of Github\n- `icy-dark` - A custom blue glow theme\n- `dark-blue` - A custom blue and black theme\n- `photon-dark` - A custom dark grey and blue theme\n\nMore themes can be added [with additional stylesheets](https://github.com/utterance/utterances/blob/master/CONTRIBUTING.md#theme-development).\n\n### Supported Issue Terms\n\n- `pathname` - Issue title which contains the path of the current page.\n- `url` - Issue title which contains the URL of the current page.\n- `title` - Issue title which contains the tab title of the current page.\n- `og:title` - Issue title which contains the Open Graph title meta.\n- `\u003cserach term\u003e` - Issue title which contains the given String.\n\n### PS. preload and prefetch Applied\n\nIt will make your Utterances Widget to load slightly faster. \u003c3\n\n\n### PS. DEMO SITE\n\n[Demo Using withUtterance](https://khw1031.github.io/posts/withUtterances)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhw1031%2Fwithutterances","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkhw1031%2Fwithutterances","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkhw1031%2Fwithutterances/lists"}