set default props inside components

packages/core/src/components/defs/patterns/PatternDots.js

@@ -10,10 +10,14 @@ export const PatternDotsDefaultProps = {
 }
 
 export const PatternDots = memo(props => {
-    const { id, background, color, size, padding, stagger } = {
-        ...PatternDotsDefaultProps,
-        ...props,
-    }
+    const {
+        id,
+        background = PatternDotsDefaultProps.background,
+        color = PatternDotsDefaultProps.color,
+        size = PatternDotsDefaultProps.size,
+        padding = PatternDotsDefaultProps.padding,
+        stagger = PatternDotsDefaultProps.stagger,
+    } = props
 
     let fullSize = size + padding
     const radius = size / 2

packages/core/src/components/defs/patterns/PatternSquares.js

@@ -10,10 +10,14 @@ export const PatternSquaresDefaultProps = {
 }
 
 export const PatternSquares = memo(props => {
-    const { id, color, background, size, padding, stagger } = {
-        ...PatternSquaresDefaultProps,
-        ...props,
-    }
+    const {
+        id,
+        color = PatternSquaresDefaultProps.color,
+        background = PatternSquaresDefaultProps.background,
+        size = PatternSquaresDefaultProps.size,
+        padding = PatternSquaresDefaultProps.padding,
+        stagger = PatternSquaresDefaultProps.stagger,
+    } = props
 
     let fullSize = size + padding
     const halfPadding = padding / 2

packages/core/src/motion/context.js

@@ -11,7 +11,7 @@ export const motionDefaultProps = {
 }
 
 export const MotionConfigProvider = props => {
-    const { children, animate, config } = { ...motionDefaultProps, ...props }
+    const { children, animate = true, config = 'default' } = props
 
     const value = useMemo(() => {
         const reactSpringConfig = isString(config) ? presets[config] : config

packages/geo/src/Choropleth.js

@@ -10,10 +10,11 @@ import { memo, Fragment, useCallback } from 'react'
 import { SvgWrapper, withContainer, useDimensions, useTheme, bindDefs } from '@nivo/core'
 import { BoxLegendSvg } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
-import { ChoroplethPropTypes, ChoroplethDefaultProps } from './props'
+import { ChoroplethPropTypes } from './props'
 import GeoGraticule from './GeoGraticule'
 import GeoMapFeature from './GeoMapFeature'
 import { useGeoMap, useChoropleth } from './hooks'
+import ChoroplethTooltip from './ChoroplethTooltip'
 
 const Choropleth = memo(props => {
     const {
@@ -22,31 +23,31 @@ const Choropleth = memo(props => {
         margin: partialMargin,
         features,
         data,
-        match,
-        label,
-        value,
+        match = 'id',
+        label = 'id',
+        value = 'value',
         valueFormat,
-        projectionType,
-        projectionScale,
-        projectionTranslation,
-        projectionRotation,
-        colors,
+        projectionType = 'mercator',
+        projectionScale = 100,
+        projectionTranslation = [0.5, 0.5],
+        projectionRotation = [0, 0, 0],
+        colors = 'PuBuGn',
         domain,
-        unknownColor,
-        borderWidth,
-        borderColor,
-        enableGraticule,
-        graticuleLineWidth,
-        graticuleLineColor,
-        layers,
-        legends,
-        isInteractive,
-        onClick,
-        tooltip: Tooltip,
-        role,
-        defs,
-        fill,
-    } = { ...ChoroplethDefaultProps, ...props }
+        unknownColor = '#999',
+        borderWidth = 0,
+        borderColor = '#000000',
+        enableGraticule = false,
+        graticuleLineWidth = 0.5,
+        graticuleLineColor = '#999999',
+        layers = ['graticule', 'features', 'legends'],
+        legends = [],
+        isInteractive = true,
+        onClick = () => {},
+        tooltip: Tooltip = ChoroplethTooltip,
+        role = 'img',
+        defs = [],
+        fill = [],
+    } = props
 
     const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
     const { graticule, path, getBorderWidth, getBorderColor } = useGeoMap({

packages/geo/src/ChoroplethCanvas.js

@@ -11,8 +11,9 @@ import { geoContains } from 'd3-geo'
 import { getRelativeCursor, withContainer, useDimensions, useTheme } from '@nivo/core'
 import { renderLegendToCanvas } from '@nivo/legends'
 import { useTooltip } from '@nivo/tooltip'
-import { ChoroplethCanvasDefaultProps, ChoroplethCanvasPropTypes } from './props'
+import { ChoroplethCanvasPropTypes } from './props'
 import { useGeoMap, useChoropleth } from './hooks'
+import ChoroplethTooltip from './ChoroplethTooltip'
 
 const getFeatureFromMouseEvent = (event, el, features, projection) => {
     const [x, y] = getRelativeCursor(el, event)
@@ -25,32 +26,32 @@ const ChoroplethCanvas = memo(props => {
         width,
         height,
         margin: partialMargin,
-        pixelRatio,
+        pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
         features,
         data,
-        match,
-        label,
-        value,
+        match = 'id',
+        label = 'id',
+        value = 'value',
         valueFormat,
-        projectionType,
-        projectionScale,
-        projectionTranslation,
-        projectionRotation,
-        colors,
+        projectionType = 'mercator',
+        projectionScale = 100,
+        projectionTranslation = [0.5, 0.5],
+        projectionRotation = [0, 0, 0],
+        colors = 'PuBuGn',
         domain,
-        unknownColor,
-        borderWidth,
-        borderColor,
-        enableGraticule,
-        graticuleLineWidth,
-        graticuleLineColor,
-        layers,
-        legends,
-        isInteractive,
-        onClick,
-        onMouseMove,
-        tooltip: Tooltip,
-    } = { ...ChoroplethCanvasDefaultProps, ...props }
+        unknownColor = '#999',
+        borderWidth = 0,
+        borderColor = '#000000',
+        enableGraticule = false,
+        graticuleLineWidth = 0.5,
+        graticuleLineColor = '#999999',
+        layers = ['graticule', 'features', 'legends'],
+        legends = [],
+        isInteractive = true,
+        onClick = () => {},
+        onMouseMove = () => {},
+        tooltip: Tooltip = ChoroplethTooltip,
+    } = props
     const canvasEl = useRef(null)
     const theme = useTheme()
     const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)

packages/geo/src/GeoMap.js

@@ -9,7 +9,7 @@
 import { Fragment, useCallback, memo } from 'react'
 import { SvgWrapper, withContainer, useDimensions, useTheme } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
-import { GeoMapPropTypes, GeoMapDefaultProps } from './props'
+import { GeoMapPropTypes } from './props'
 import GeoGraticule from './GeoGraticule'
 import GeoMapFeature from './GeoMapFeature'
 import { useGeoMap } from './hooks'
@@ -20,22 +20,22 @@ const GeoMap = memo(props => {
         height,
         margin: partialMargin,
         features,
-        layers,
-        projectionType,
-        projectionScale,
-        projectionTranslation,
-        projectionRotation,
-        fillColor,
-        borderWidth,
-        borderColor,
-        enableGraticule,
-        graticuleLineWidth,
-        graticuleLineColor,
-        isInteractive,
-        onClick,
+        layers = ['graticule', 'features'],
+        projectionType = 'mercator',
+        projectionScale = 100,
+        projectionTranslation = [0.5, 0.5],
+        projectionRotation = [0, 0, 0],
+        fillColor = '#dddddd',
+        borderWidth = 0,
+        borderColor = '#000000',
+        enableGraticule = false,
+        graticuleLineWidth = 0.5,
+        graticuleLineColor = '#999999',
+        isInteractive = true,
+        onClick = () => {},
         tooltip: Tooltip,
-        role,
-    } = { ...GeoMapDefaultProps, ...props }
+        role = 'img',
+    } = props
     const { margin, outerWidth, outerHeight } = useDimensions(width, height, partialMargin)
     const { graticule, path, getFillColor, getBorderWidth, getBorderColor } = useGeoMap({
         width,

packages/geo/src/GeoMapCanvas.js

@@ -10,7 +10,7 @@ import { memo, useRef, useEffect, useCallback } from 'react'
 import { geoContains } from 'd3-geo'
 import { getRelativeCursor, withContainer, useDimensions, useTheme } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
-import { GeoMapCanvasDefaultProps, GeoMapCanvasPropTypes } from './props'
+import { GeoMapCanvasPropTypes } from './props'
 import { useGeoMap } from './hooks'
 
 const getFeatureFromMouseEvent = (event, el, features, projection) => {
@@ -24,28 +24,28 @@ const GeoMapCanvas = memo(props => {
         width,
         height,
         margin: partialMargin,
-        pixelRatio,
+        pixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
         features,
         layers,
 
-        projectionType,
-        projectionScale,
-        projectionTranslation,
-        projectionRotation,
+        projectionType = 'mercator',
+        projectionScale = 100,
+        projectionTranslation = [0.5, 0.5],
+        projectionRotation = [0, 0, 0],
 
-        fillColor,
-        borderWidth,
-        borderColor,
+        fillColor = '#dddddd',
+        borderWidth = 0,
+        borderColor = '#000000',
 
-        enableGraticule,
-        graticuleLineWidth,
-        graticuleLineColor,
+        enableGraticule = false,
+        graticuleLineWidth = 0.5,
+        graticuleLineColor = '#999999',
 
-        isInteractive,
-        onClick,
-        onMouseMove,
+        isInteractive = true,
+        onClick = () => {},
+        onMouseMove = () => {},
         tooltip: Tooltip,
-    } = { ...GeoMapCanvasDefaultProps, ...props }
+    } = props
 
     const canvasEl = useRef(null)
     const theme = useTheme()