Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
react-vk
Advanced tools
Readme
VK API bindings for React
npm install --save react-vk
yarn add react-vk
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!
<VK apiId={123456} />
- provides child components with vk. apiId - requires<AllowMessagesFromCommunity />
- AllowMessagesFromCommunity Widget instance<Application />
- App 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<Subscribe />
- Subscribe Widget instanceEvery 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. 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
<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
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
window.onload = function () {
VK.init({apiId: 123456});
}
import { VK } from 'react-vk';
const App = () => (
return (
<VK apiId={123456}/>
)
);
window.onload = function () {
VK.init({apiId: 123456});
VK.Widgets.Auth('vk_auth', {});
}
import { VK, Auth } from 'react-vk';
const App = () => (
return (
<VK apiId={123456}>
<Auth />
</VK>
)
);
<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>
import { VK, Subscribe } from 'react-vk';
const App = () => (
return (
<VK apiId={123456}>
<Subscribe
ownerId={17437657}
onSubscribe={()=> {alert('Thank you!');}}
/>
</VK>
)
);
<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>
import React, { Component } from 'react';
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 apiId={6247321}>
<CommunityMessages
groupId={127607773}
onMount={(widget, id) => {
this.setState({ widget, id });
}}
/>
</VK>
</div>
);
You can clone this repository and check more examples
git clone https://github.com/mmarkelov/react-vk.git
cd ./react-vk
npm install && npm run examples
Also you can check them here
FAQs
VK API bindings for React
The npm package react-vk receives a total of 145 weekly downloads. As such, react-vk popularity was classified as not popular.
We found that react-vk demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).