Socket
Socket
Sign inDemoInstall

react-vk

Package Overview
Dependencies
3
Maintainers
1
Versions
64
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-vk

VK API bindings for React


Version published
Maintainers
1
Weekly downloads
338
increased by31.52%

Weekly downloads

Readme

Source

react-vk

VK API bindings for React

Install

For latest release you need react 16.8

Depending on your react you need different version of package:

react-vkreact
1.1.5< 16
1.1.6> 16.2
3.5.2between 16.2 and 16.6
4.2.016.6
5.0.016.8
npm install --save react-vk
yarn add react-vk

Important notes!

For local projects run your server on port 80 (This is VK API requirement for local projects) For example using create-react-app in your package.json:

"start": "PORT=80 react-scripts start"

Then:

sudo npm run start

You need run this command as administrator!

Components

Basic components

  • <VK /> - provides child components with vk
  • <AllowMessagesFromCommunity /> - AllowMessagesFromCommunity Widget instance
  • <Application /> - App Widget instance
  • <Article /> - Article Widget instance
  • <Auth /> - Auth Widget instance
  • <Comments /> - Comments Widget instance
  • <CommentsBrowse /> - CommentsBrowse Widget instance
  • <CommunityMessages /> - CommunityMessages Widget instance
  • <ContactUs /> - ContactUs Widget instance
  • <Group /> - Group Widget instance
  • <Like /> - Like Widget instance
  • <Playlist /> - Playlist Widget instance
  • <Poll /> - Poll Widget instance
  • <Post /> - Post Widget instance
  • <Recommended /> - Recommended Widget instance
  • <Share /> - Share Widget instance
  • <Subscribe /> - Subscribe Widget instance
Information about components

Every component has options object, which contains parameters (You can find available fields on VK API for selected widget)

  • <VK apiId={number} onApiAvailable={function}/> requires apiId for init VK, but for some components you can skip apiId prop. (Application, Article, Group, CommunityMessages, Playlist, Post, Subscribe) More information on VK API onApiAvailable - function that provide you access to VK api instance

  • <AllowMessagesFromCommunity elementId={string} options={object} groupId={number} onAllow={function} onDeny={function} /> requires groupId for correct work. You can set options by object, elementId - ID of the container element for the module, use functions: onAllow(When "Allow messages" button is pressed), onDeny(If the user denies messages) More information on VK API

  • <Article elementId={string} articleUrl={string} /> elementId - ID of the container element for the module, articleUrl - url of article, More information on VK API

  • <Application elementId={string} appId={number} options={object} /> requires appId for correct work. You can set options by object, elementId - ID of the container element for the module, More information on VK API

  • <Auth elementId={string} options={object} onAuth={function} /> You can set options by object, elementId - ID of the container element for the module, use onAuth function(which can use a result of authorization(object with following fields: uid, first_name, last_name, photo, photo_rec, hash) More information on VK API

  • <Comments elementId={string} options={object} pageId={string} onNewComment={function} onDeleteComment={function} /> You can set options by object, pageId - ID of the page on your site, elementId - ID of the container element for the module. When a comment is posted or deleted 4 parameters are passed to the handler functions(onNewComment, onDeleteComment): num, last_comment, date, sign More information on VK API

  • <CommentsBrowse elementId={string} options={object} /> You can set options by object, pageId - ID of the page on your site, elementId - ID of the container element for the module. More information on VK API

  • <CommunityMessages elementId={string} options={object} groupId={number} onMount={function} /> requires groupId for correct work. You can set options by object, elementId - ID of the container element for the module, onMount = function that get mounted widget and elementId for extra actions: destroy — deletes the widget(requires elementId); expand — expands widget frame, may take welcomeScreen parameter (1 to show the welcome screen); stopTitleAnimation — disables title animation when new message received; minimize — minimizes widget frame. More information on VK API

  • <ContactUs elementId={string} options={object} ownerId={number} /> requires ownerId for correct work. You can set options by object, elementId - ID of the container element for the module More information on VK API

  • <Group elementId={string} groupId={number} options={object} onJoin={function} onLeave={function} /> requires groupId for correct work. You can set options by object, elementId - ID of the container element for the module, When the 'Follow on VK' button is clicked your can use onJoin and onLeave functions More information on VK API

  • <Like elementId={string} options={object} pageId={string} onLike={function} onUnlike={function} onShare={function} onUnshare={function} /> You can set options by object, elementId - ID of the container element for the module, pageId - ID of the page on your site, 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. Similar when Share With Friends is selected

    Important note!

    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!

    More information on VK API

  • <Playlist elementId={string} ownerId={number} playlistId={number} hash={string} options={object} /> For correct works requires ownerId, playlistId, hash(service parameter. hash can be obtained in the constructor only.) You can set options by object, elementId - ID of the container element for the module More information on VK API

  • <Poll elementId={string} options={object} pollId={string} /> 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) You can set options by object, elementId - ID of the container element for the module More information on VK API

  • <Post elementId={string} options={object} ownerId={number} postId={number} hash={string} /> For correct works requires ownerId, postId, hash(You can get hash in widget's constructor or "Export" window only.) You can set options by object, elementId - ID of the container element for the module More information on VK API

  • <Recommended elementId={string} options={object} /> You can set options by object, elementId - ID of the container element for the module More information on VK API

  • <Subscribe elementId={string} options={object} ownerId={number} onSubscribe={function} onUnsubscribe={function} /> requires ownerId for correct work. You can set options by object, elementId - ID of the container element for the module, when user subscribes, you can use onSubscribe function; when user unsubscribes — onUnsubscribe. More information on VK API https://vk.com/dev/widget_subscribe

  • <Share shareOptions={object} buttonOptions={object} /> You can set shareOptions and buttonOptions by object, More information on VK API

Basic usage

Setup

With VK API
window.onload = function() {
  VK.init({ apiId: 123456 });
};
With react-vk
import VK from "react-vk";

const App = () => {
  return <VK apiId={123456} />;
};

Components

With VK API
window.onload = function() {
  VK.init({ apiId: 123456 });
  VK.Widgets.Auth("vk_auth", {});
};

With react-vk

import VK, { Auth } from "react-vk";

const App = () => {
  return (
    <VK apiId={123456}>
      <Auth />
    </VK>
  );
};

Functions

With VK API
<script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script>

<script type="text/javascript">
  VK.init({apiId: 123456});
</script>
<div id="vk_like"></div>
<script type="text/javascript">
  VK.Widgets.Like("vk_like", {type: "button"});
  VK.Observer.subscribe("widgets.subscribed", function f() {
   alert ("Thank you!");
  });
</script>

With react-vk

import VK, { Subscribe } from "react-vk";

const App = () => {
  return (
    <VK>
      <Subscribe
        ownerId={17437657}
        onSubscribe={() => {
          alert("Thank you!");
        }}
      />
    </VK>
  );
};

Using CommunityMessages

With VK API
<div id="vk_community_messages"></div>
<script type="text/javascript">
  var widget = VK.Widgets.CommunityMessages("vk_community_messages", 20003922);
  widget.stopTitleAnimation();
  widget.expand({
    welcomeScreen: 1,
  });
</script>

With react-vk

import VK, { CommunityMessages } from 'react-vk';

class App extends Component {
  state = {
    widget: null,
    id: null,
  };

  handleClick = () => {
    this.state.widget.destroy(this.state.id);
  };

  render() {
    return (
    <div>
      <button onClick={this.handleClick}>Delete CommunityMessages</button>
      <VK>
        <CommunityMessages
          groupId={127607773}
          onMount={(widget, id) => {
            this.setState({ widget, id });
          }}
        />
      </VK>
    </div>
    );

More details and examples

You can clone this repository and check more examples

git clone https://github.com/mmarkelov/react-vk.git
cd ./react-vk/examples
npm install && npm run dev

Also you can check them here

TODO

  • Add more tests
  • Add custom hooks

Acknowledgements

Keywords

FAQs

Last updated on 22 May 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc