react-svg-worldmap - npm Package Compare versions

Comparing version 1.0.25 to 1.0.26

CHANGELOG.md

@@ -17,2 +17,6 @@ # CHANGELOG
 * Renamed the islands to avoid confusion
-* Added user control over map styling using stylingFunction (see README.md file for more detail)
+* Added user control over map styling using stylingFunction (see README.md file for more detail)
+
+## 1.0.26
+
+* Bug fix returning functionality due to the default styling function

package.json

 {
   "name": "react-svg-worldmap",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "license": "MIT",
@@ -5,0 +5,0 @@ "displayName": "React Worldmap",

README.md

@@ -89,2 +89,22 @@ # react-svg-worldmap [![License: MIT](https://img.shields.io/badge/license-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm version](https://img.shields.io/npm/v/react-svg-worldmap.svg?style=flat)](https://www.npmjs.com/package/react-svg-worldmap) [![Demo: Simple Example](https://img.shields.io/badge/demo-live-red.svg)](https://react-svg-worldmap-simple-example.imfast.io)
 
+### Custom Styling
+This is an optional more advanced customization option. When used, the developer has full control to define the color, opacity and any other style element of a country with data record. 
+
+This is done by passing your custom implementation of the `styleFunction`. The function recieves as input the country context that includes country,countryValue: colorm, minValue and maxValue, and returns a json object representing the style. 
+
+For example: 
+~~~tsx
+const stylingFunction = (context : any) => {
+    const opacityLevel = 0.1 + (1.5 * (context.countryValue - context.minValue) / (context.maxValue - context.minValue))
+    return {
+        fill: context.country === "US" ? "blue" : context.color, 
+        fillOpacity: opacityLevel, 
+        stroke: "green", 
+        strokeWidth: 1, 
+        strokeOpacity: 0.2, 
+        cursor: "pointer" 
+           }
+}
+~~~
+
 ### Optional Props
@@ -94,2 +114,3 @@
 | ---------------- | ------- | ----------- |
+| data             | Array   | Mandatory. Array of JSON records, each with country/value. |
 | size             | string  | The size of your map, either "sm", md", or "lg" |
@@ -108,5 +129,5 @@ | title            | string  | Any string for the title of your map |
 
-### Samples
+## Samples
 
-examples/simple-example
+### examples/simple-example
  * A simple example of the world map
@@ -117,6 +138,9 @@ * 4 maps given two different data sets
 
-examples/custom-style-example
+### examples/custom-style-example
  * An example of a custom styling function
  * Context type must remain any so that you can use the inputs that I pass to you
  The inputs are as follows:
+ 
+ | Input             | Type    | Description |
+ | ---------------- | ------- | ----------- |
  | country      | string | ISO value for each country |
@@ -123,0 +147,0 @@ | countryValue | number | Value inputted for the specific country (this is the input data for the specific country) |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

432481

increased by0.3%

Lines of code

3357

increased by0.03%

Number of lines in readme file

150

increased by19.05%

No dependency changes