Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
@hoducha/react-hz
Advanced tools
Readme
React Horizon makes it easier to use your React application with horizon.io realtime backend
$ npm i react-hz
React Horizon allows reactive dataflow between backend and React.js application. Client demand is declared in React components using Horizon's query API and data is synchronized thanks to horizon.io realtime backend.
example
directory: $ hz serve --dev
Read Horizon's Collection API for querying methods.
react-hz
package provides HorizonProvider
instance provider component, HorizonRoute
application route component, connector function and Horizon
client library.
<HorizonProvider />
HorizonProvider
is a top level component in your application which establishes connection to Horizon server. The component accepts an instance of Horizon
constructor as instance
prop.
<HorizonProvider instance={horizonInstance}>
<App />
</HorizonProvider>
Horizon([config])
Horizon
is a constructor function from Horizon's client library included into react-hz
. Constructor function accepts optional config object http://horizon.io/api/horizon/#constructor.
const horizonInstance = Horizon({ host: 'localhost:8181' });
<HorizonRoute />
HorizonRoute
is a top level component for every screen in your application which provides an API to respond to connectivity status changes.
Normally you should render your app in renderSuccess
callback. renderFailure
callback receives error object which can be used to render an error message.
<HorizonRoute
renderConnecting={() => <h1>Connecting...</h1>}
renderDisconnected={() => <h1>You are offline</h1>}
renderConnected={() => <h1>You are online</h1>}
renderSuccess={() => <h1>Hello!</h1>}
renderFailure={(error) => <h1>Something went wrong...</h1>} />
connect(component, config)
connect
function wraps React components with specified queries for subscriptions and mutations. Connector function expects two arguments: React component and subscriptions/mutations config object. Props passed into container component are automatically passed into wrapped component.
const AppContainer = connect(App, {
subscriptions: {
// ...
},
mutations: {
// ...
}
});
withQueries(config)
withQueries
is like connect
, but designed to be used as a decorator. If you have enabled the decorator syntax in your project, instead of using connect
like above, you can do the following:
import {withQueries} from 'react-hz'
@withQueries({
subscriptions: {
// ...
},
mutations: {
// ...
}
})
class MyComponent extends Component {
// ...
}
subscriptions
is a map of subscription names to query functions. Data behind query is available as a prop with the same name in React component. Query function receives Horizon hz
function which should be used to construct a query using Horizon's Collection API and props object which is being passed into container component.
Behind the scenes React Horizon calls subscribe
function on query object which returns RxJS Observable and subscribes to incoming data. Data received by that observable is then passed into React component as props.
All subscriptions are unsubscribed automatically on componentWillUnmount
.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Horizon, HorizonProvider, connect } from 'react-hz';
class App extends Component {
render() {
const itemsSubcription = this.props.items;
return (
<ul>{itemsSubcription.map(({ id, title }) => <li key={id}>{title}</li>)}</ul>
);
}
}
const AppContainer = connect(App, {
subscriptions: {
items: (hz, { username }) => hz('items')
.find({ username })
.below({ id: 10 })
.order('title', 'ascending').watch()
}
});
render((
<HorizonProvider instance={Horizon()}>
<AppContainer username='John' />
</HorizonProvider>
), document.getElementById('app'));
mutations
is a map of mutation query names to mutation query functions. Specified mutations are available as props in React component behind their corresponding names in config.
Available mutation operations:
remove
- http://horizon.io/api/collection/#removeremoveAll
- http://horizon.io/api/collection/#removeallreplace
- http://horizon.io/api/collection/#replacestore
- http://horizon.io/api/collection/#storeupsert
- http://horizon.io/api/collection/#upsertIt's possible to create two types of mutations (see example below):
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Horizon, HorizonProvider, connect } from 'react-hz';
class App extends Component {
render() {
const itemsMutation = this.props.items;
const removeItem = this.props.removeItem;
return (
<div>
<button onClick={() => itemsMutation.store({ title: 'Item' })}>add</button>
<button onClick={() => removeItem(24)}>remove</button>
</div>
);
}
}
const AppContainer = connectHorizon(App, {
mutations: {
items: (hz) => hz('items'),
removeItem: (hz) => (id) => hz('items').remove(id)
}
});
render((
<HorizonProvider instance={Horizon()}>
<AppContainer />
</HorizonProvider>
), document.getElementById('app'));
MIT
FAQs
React Horizon makes it easier to use your React application with horizon.io realtime backend
The npm package @hoducha/react-hz receives a total of 1 weekly downloads. As such, @hoducha/react-hz popularity was classified as not popular.
We found that @hoducha/react-hz 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.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.