react-vk
VK API bindings for React
Last updated 4 months ago by mapkeji .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-vk 
SYNC missed versions from official npm registry.

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-vk react
1.1.5 < 16
1.1.6 > 16.2
3.5.2 between 16.2 and 16.6
4.2.0 16.6
5.0.0 16.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

Current Tags

  • 5.0.2                                ...           latest (4 months ago)
  • 5.0.0-rc.0                                ...           next (5 months ago)

64 Versions

  • 5.0.2                                ...           4 months ago
  • 5.0.1                                ...           4 months ago
  • 5.0.0                                ...           5 months ago
  • 5.0.0-rc.0                                ...           5 months ago
  • 4.2.0                                ...           7 months ago
  • 4.1.1                                ...           7 months ago
  • 4.1.0                                ...           7 months ago
  • 4.0.2                                ...           8 months ago
  • 4.0.1                                ...           9 months ago
  • 4.0.0                                ...           9 months ago
  • 3.5.2                                ...           9 months ago
  • 3.5.1                                ...           10 months ago
  • 3.5.0                                ...           10 months ago
  • 3.4.1                                ...           a year ago
  • 3.4.0                                ...           a year ago
  • 3.3.3                                ...           a year ago
  • 3.3.2                                ...           a year ago
  • 3.3.1                                ...           a year ago
  • 3.3.0 [deprecated]           ...           a year ago
  • 3.2.0                                ...           a year ago
  • 3.1.0                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.1.6                                ...           a year ago
  • 2.1.5                                ...           a year ago
  • 2.1.4                                ...           a year ago
  • 2.1.3                                ...           a year ago
  • 2.1.2                                ...           a year ago
  • 2.1.1                                ...           a year ago
  • 2.1.0 [deprecated]           ...           a year ago
  • 2.0.8                                ...           a year ago
  • 2.0.7                                ...           a year ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           a year ago
  • 2.0.4                                ...           a year ago
  • 2.0.3                                ...           a year ago
  • 2.0.2                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0 [deprecated]           ...           a year ago
  • 1.1.13                                ...           a year ago
  • 1.1.12                                ...           a year ago
  • 1.1.11                                ...           a year ago
  • 1.1.10                                ...           a year ago
  • 1.1.9                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.1.7                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1 [deprecated]           ...           a year ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 0.0.10                                ...           2 years ago
  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 1
Last Month 65
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |