{"id":15017602,"url":"https://github.com/mmarkelov/react-vk","last_synced_at":"2025-06-24T18:40:13.743Z","repository":{"id":57347471,"uuid":"110137872","full_name":"mmarkelov/react-vk","owner":"mmarkelov","description":"VK API for React","archived":false,"fork":false,"pushed_at":"2019-05-22T08:56:13.000Z","size":5857,"stargazers_count":46,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T23:06:31.058Z","etag":null,"topics":["react","react-vk","vk"],"latest_commit_sha":null,"homepage":"https://mmarkelov.github.io/react-vk/","language":"JavaScript","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/mmarkelov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-09T16:15:52.000Z","updated_at":"2024-10-24T20:55:35.000Z","dependencies_parsed_at":"2022-08-28T03:01:30.065Z","dependency_job_id":null,"html_url":"https://github.com/mmarkelov/react-vk","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/mmarkelov/react-vk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-vk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-vk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-vk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-vk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmarkelov","download_url":"https://codeload.github.com/mmarkelov/react-vk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmarkelov%2Freact-vk/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259816958,"owners_count":22916044,"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":["react","react-vk","vk"],"created_at":"2024-09-24T19:50:44.215Z","updated_at":"2025-06-24T18:40:13.681Z","avatar_url":"https://github.com/mmarkelov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-vk\n\n[VK API](https://vk.com/dev/widgets_for_sites)\nbindings for React\n\n## Install\n\n### For latest release you need **react 16.8**\n\nDepending on your `react` you need different version of package:\n\n| react-vk      | react         |\n| ------------- |:-------------:| \n| 1.1.5         |  \u003c 16         | \n| 1.1.6         | \u003e 16.2        |\n| 3.5.2         |  between 16.2 and 16.6 |\n| 4.2.0         |   16.6 |\n| 5.0.0         |   16.8 |\n\n```shell\nnpm install --save react-vk\nyarn add react-vk\n```\n\n## Important notes!\n\nFor local projects run your server on port 80 (This is VK API requirement for local projects)\nFor example using create-react-app in your package.json:\n\n```js\n\"start\": \"PORT=80 react-scripts start\"\n```\n\nThen:\n\n```shell\nsudo npm run start\n```\n\nYou need run this command as administrator!\n\n## Components\n\n### Basic components\n\n- `\u003cVK /\u003e` - provides child components with vk\n- `\u003cAllowMessagesFromCommunity /\u003e` - AllowMessagesFromCommunity Widget instance\n- `\u003cApplication /\u003e` - App Widget instance\n- `\u003cArticle /\u003e` - Article Widget instance\n- `\u003cAuth /\u003e` - Auth Widget instance\n- `\u003cComments /\u003e` - Comments Widget instance\n- `\u003cCommentsBrowse /\u003e` - CommentsBrowse Widget instance\n- `\u003cCommunityMessages /\u003e` - CommunityMessages Widget instance\n- `\u003cContactUs /\u003e` - ContactUs Widget instance\n- `\u003cGroup /\u003e` - Group Widget instance\n- `\u003cLike /\u003e` - Like Widget instance\n- `\u003cPlaylist /\u003e` - Playlist Widget instance\n- `\u003cPoll /\u003e` - Poll Widget instance\n- `\u003cPost /\u003e` - Post Widget instance\n- `\u003cRecommended /\u003e` - Recommended Widget instance\n- `\u003cShare /\u003e` - Share Widget instance\n- `\u003cSubscribe /\u003e` - Subscribe Widget instance\n\n#### Information about components\n\nEvery component has options object, which contains parameters (You can find available fields on VK API for selected widget)\n\n- `\u003cVK apiId={number} onApiAvailable={function}/\u003e`\n  requires **apiId** for init VK, but for some components you can skip **apiId** prop. (**Application**, **Article**, **Group**, **CommunityMessages**, **Playlist**, **Post**, **Subscribe**)\n  More information on [VK API](https://vk.com/dev/openapi)\n  onApiAvailable - function that provide you access to VK api instance\n\n- `\u003cAllowMessagesFromCommunity elementId={string} options={object} groupId={number} onAllow={function} onDeny={function} /\u003e`\n  requires groupId for correct work.\n  You can set options by object,\n  elementId - ID of the container element for the module,\n  use functions: onAllow(When \"Allow messages\" button is pressed),\n  onDeny(If the user denies messages)\n  More information on [VK API](https://vk.com/dev/widget_allow_messages_from_community)\n\n- `\u003cArticle elementId={string} articleUrl={string} /\u003e`\n  elementId - ID of the container element for the module,\n  articleUrl - url of article,\n  More information on [VK API](https://vk.com/dev/widget_article)\n\n- `\u003cApplication elementId={string} appId={number} options={object} /\u003e`\n  requires appId for correct work.\n  You can set options by object,\n  elementId - ID of the container element for the module,\n  More information on [VK API](https://vk.com/dev/widget_app)\n\n- `\u003cAuth elementId={string} options={object} onAuth={function} /\u003e`\n  You can set options by object,\n  elementId - ID of the container element for the module,\n  use onAuth function(which can use a result of authorization(object with following fields: uid, first_name, last_name, photo, photo_rec, hash)\n  More information on [VK API](https://vk.com/dev/widget_auth)\n\n- `\u003cComments elementId={string} options={object} pageId={string} onNewComment={function} onDeleteComment={function} /\u003e`\n  You can set options by object,\n  pageId - ID of the page on your site,\n  elementId - ID of the container element for the module.\n  When a comment is posted or deleted 4 parameters are passed to the handler functions(onNewComment, onDeleteComment):\n  num, last_comment, date, sign\n  More information on [VK API](https://vk.com/dev/widget_comments)\n\n- `\u003cCommentsBrowse elementId={string} options={object} /\u003e`\n  You can set options by object,\n  pageId - ID of the page on your site,\n  elementId - ID of the container element for the module.\n  More information on [VK API](https://vk.com/dev/widget_comments)\n\n- `\u003cCommunityMessages elementId={string} options={object} groupId={number} onMount={function} /\u003e`\n  requires groupId for correct work.\n  You can set options by object,\n  elementId - ID of the container element for the module,\n  onMount = function that get mounted widget and elementId for extra actions:\n  destroy — deletes the widget(requires elementId);\n  expand — expands widget frame, may take welcomeScreen parameter (1 to show the welcome screen);\n  stopTitleAnimation — disables title animation when new message received;\n  minimize — minimizes widget frame.\n  More information on [VK API](https://vk.com/dev/widget_community_messages)\n\n- `\u003cContactUs elementId={string} options={object} ownerId={number} /\u003e`\n  requires ownerId for correct work.\n  You can set options by object,\n  elementId - ID of the container element for the module\n  More information on [VK API](https://vk.com/dev/widget_contact_us)\n\n- `\u003cGroup elementId={string} groupId={number} options={object} onJoin={function} onLeave={function} /\u003e`\n  requires groupId for correct work.\n  You can set options by object,\n  elementId - ID of the container element for the module,\n  When the 'Follow on VK' button is clicked your can use onJoin and onLeave functions\n  More information on [VK API](https://vk.com/dev/widget_community)\n\n- `\u003cLike elementId={string} options={object} pageId={string} onLike={function} onUnlike={function} onShare={function} onUnshare={function} /\u003e`\n  You can set options by object,\n  elementId - ID of the container element for the module,\n  pageId - ID of the page on your site,\n  When Like button is clicked you can use onLike and onUnlike functions. You can use number of Likes for the current page as a parameter.\n  Similar when Share With Friends is selected\n\n  ### Important note!\n\n  According to documentation VK Like component require page_id if we need two or more independent likes on single page. So if you are using SPA - pageId attribute is required!\n\n  More information on [VK API](https://vk.com/dev/widget_like)\n\n- `\u003cPlaylist elementId={string} ownerId={number} playlistId={number} hash={string} options={object} /\u003e`\n  For correct works requires ownerId, playlistId, hash(service parameter. hash can be obtained in the constructor only.)\n  You can set options by object,\n  elementId - ID of the container element for the module\n  More information on [VK API](https://vk.com/dev/widget_playlist)\n\n- `\u003cPoll elementId={string} options={object} pollId={string} /\u003e`\n  requires pollId for correct work(You can get it using the form on https://vk.com/dev/Poll or with a button \"Get code\" in the existing poll)\n  You can set options by object,\n  elementId - ID of the container element for the module\n  More information on [VK API](https://vk.com/dev/widget_poll)\n\n- `\u003cPost elementId={string} options={object} ownerId={number} postId={number} hash={string} /\u003e`\n  For correct works requires ownerId, postId, hash(You can get hash in widget's constructor or \"Export\" window only.)\n  You can set options by object,\n  elementId - ID of the container element for the module\n  More information on [VK API](https://vk.com/dev/widget_post)\n\n- `\u003cRecommended elementId={string} options={object} /\u003e`\n  You can set options by object,\n  elementId - ID of the container element for the module\n  More information on [VK API](https://vk.com/dev/widget_recommended)\n\n- `\u003cSubscribe elementId={string} options={object} ownerId={number} onSubscribe={function} onUnsubscribe={function} /\u003e`\n  requires ownerId for correct work.\n  You can set options by object,\n  elementId - ID of the container element for the module,\n  when user subscribes, you can use onSubscribe function; when user unsubscribes — onUnsubscribe.\n  More information on [VK API](https://vk.com/dev/widget_recommended)\n  https://vk.com/dev/widget_subscribe\n\n- `\u003cShare shareOptions={object} buttonOptions={object} /\u003e`\n  You can set shareOptions and buttonOptions by object,\n  More information on [VK API](https://vk.com/dev/widget_share)\n\n## Basic usage\n\n### Setup\n\n#### With VK API\n\n```js\nwindow.onload = function() {\n  VK.init({ apiId: 123456 });\n};\n```\n\n#### With react-vk\n\n```js\nimport VK from \"react-vk\";\n\nconst App = () =\u003e {\n  return \u003cVK apiId={123456} /\u003e;\n};\n```\n\n### Components\n\n#### With VK API\n\n```js\nwindow.onload = function() {\n  VK.init({ apiId: 123456 });\n  VK.Widgets.Auth(\"vk_auth\", {});\n};\n```\n\n### With react-vk\n\n```js\nimport VK, { Auth } from \"react-vk\";\n\nconst App = () =\u003e {\n  return (\n    \u003cVK apiId={123456}\u003e\n      \u003cAuth /\u003e\n    \u003c/VK\u003e\n  );\n};\n```\n\n### Functions\n\n#### With VK API\n\n```js\n\u003cscript type=\"text/javascript\" src=\"//vk.com/js/api/openapi.js?122\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  VK.init({apiId: 123456});\n\u003c/script\u003e\n\u003cdiv id=\"vk_like\"\u003e\u003c/div\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  VK.Widgets.Like(\"vk_like\", {type: \"button\"});\n  VK.Observer.subscribe(\"widgets.subscribed\", function f() {\n   alert (\"Thank you!\");\n  });\n\u003c/script\u003e\n```\n\n### With react-vk\n\n```js\nimport VK, { Subscribe } from \"react-vk\";\n\nconst App = () =\u003e {\n  return (\n    \u003cVK\u003e\n      \u003cSubscribe\n        ownerId={17437657}\n        onSubscribe={() =\u003e {\n          alert(\"Thank you!\");\n        }}\n      /\u003e\n    \u003c/VK\u003e\n  );\n};\n```\n\n### Using CommunityMessages\n\n#### With VK API\n\n```js\n\u003cdiv id=\"vk_community_messages\"\u003e\u003c/div\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  var widget = VK.Widgets.CommunityMessages(\"vk_community_messages\", 20003922);\n  widget.stopTitleAnimation();\n  widget.expand({\n    welcomeScreen: 1,\n  });\n\u003c/script\u003e\n```\n\n### With react-vk\n\n```js\nimport VK, { CommunityMessages } from 'react-vk';\n\nclass App extends Component {\n  state = {\n    widget: null,\n    id: null,\n  };\n\n  handleClick = () =\u003e {\n    this.state.widget.destroy(this.state.id);\n  };\n\n  render() {\n    return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={this.handleClick}\u003eDelete CommunityMessages\u003c/button\u003e\n      \u003cVK\u003e\n        \u003cCommunityMessages\n          groupId={127607773}\n          onMount={(widget, id) =\u003e {\n            this.setState({ widget, id });\n          }}\n        /\u003e\n      \u003c/VK\u003e\n    \u003c/div\u003e\n    );\n```\n\n## More details and examples\n\nYou can clone this repository and check more examples\n\n```shell\ngit clone https://github.com/mmarkelov/react-vk.git\ncd ./react-vk/examples\nnpm install \u0026\u0026 npm run dev\n```\n\nAlso you can check them [here](https://mmarkelov.github.io/react-vk/)\n\n## TODO\n\n- [ ] Add more tests\n- [ ] Add custom hooks\n\n## Acknowledgements\n\n- Thanks to [@gribnoysup](https://github.com/gribnoysup/) and his [react-yandex-maps](https://github.com/gribnoysup/react-yandex-maps) for inspiration and motivation.\n- Thanks to [@seeden](https://github.com/seeden/) and his [react-facebook](https://github.com/seeden/react-facebook) for inspiration and motivation.\n- Lots of features were founded in these perfect packages.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmarkelov%2Freact-vk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmarkelov%2Freact-vk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmarkelov%2Freact-vk/lists"}