Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-jsx-highmaps
Advanced tools
Readme
A project for integrating Highmaps into a React app, with proper React components for each Highmaps component. Inspired by Recharts, but for Highmaps, obviously.
npm install --save react-jsx-highmaps
You'll need the peer dependencies too
npm install --save react react-dom highcharts@^9.0.0
React JSX Highmaps is free to use, however Highcharts itself requires a license for commercial use. Highcharts license FAQs.
The intention of this library is to provide a very thin abstraction of Highmaps using React components. This has been achieved by passing configuration options as component props.
In the vast majority of cases, the name of the configuration option, and the name of the component prop are the same.
<Tooltip />
component
<Tooltip padding={10} hideDelay={250} shape="square" split />
This corresponds to the Highcharts' tooltip
configuration of
tooltip: {
enabled: true, // This is assumed when component is mounted
padding: 10,
hideDelay: 250,
shape: 'square',
split: true
}
We aim to pass all configuration options using the same name, so we use Highcharts' documentation to figure out how to achieve the same with React JSX Highcharts.
There are two exceptions to the above;
Where Highcharts events are concerned - instead of passing events
as an object, we use the React convention onEventName.
<MapBubbleSeries
id="my-series"
data={myData}
onHide={this.handleHide}
onShow={this.handleShow}
/>
This would correspond to the Highcharts configuration
series: [
{
type: 'mapbubble',
id: 'my-series',
data: myData,
events: { hide: this.handleHide, show: this.handleShow }
}
];
text
configuration options are passed as a React child
<Title>Some Text Here</Title>
This would correspond to the Highcharts configuration
title: {
text: 'Some Text Here';
}
// import Highmaps from 'highcharts/highmaps' - Import Highmaps from Highcharts
// import { Fetch } from 'react-request'
const MyMapChart = (props) => (
<HighmapsProvider Highcharts={Highmaps}>
<Fetch url="https://code.highcharts.com/mapdata/custom/europe.geo.json">
{({ fetching, failed, data }) => {
if (fetching) return <div>Loading…</div>
if (failed) return <div>Failed to load map.</div>
if (data) {
return (
<HighchartsMapChart map={data}>
<Title>Nordic countries</Title>
<MapSeries
data={[
['is', 1],
['no', 1],
['se', 1],
['dk', 1],
['fi', 1]
]}
dataLabels={{
enabled: true,
color: '#FFFFFF',
format: '{point.name}'
}}
/>
<MapNavigation>
<MapNavigation.ZoomIn/>
<MapNavigation.ZoomOut/>
</MapNavigation>
<Tooltip/>
<Credits/>
</HighchartsMapChart>
)
}
return null
}}
</Fetch>
</HighmapsProvider>
);
FAQs
Highmaps built using React components
The npm package react-jsx-highmaps receives a total of 1,287 weekly downloads. As such, react-jsx-highmaps popularity was classified as popular.
We found that react-jsx-highmaps demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.