uiwjs / react-heat-map

A lightweight calendar heatmap react component built on SVG, customizable version of GitHub's contribution graph.
https://uiwjs.github.io/react-heat-map
MIT License
212 stars 26 forks source link

app-index.js:35 Warning: A props object containing a "key" prop is being spread into JSX: let props = {key: someKey, rx: ..., fill: ..., width: ..., height: ..., x: ..., y: ..., render: ..., value: ..., data-date: ..., data-index: ..., data-row: ..., data-column: ...}; <Rect {...props} /> React keys must be passed directly to JSX without using spread: let props = {rx: ..., fill: ..., width: ..., height: ..., x: ..., y: ..., render: ..., value: ..., data-date: ..., data-index: ..., data-row: ..., data-column: ...}; <Rect key={someKey} {...props} /> #128

Closed ruru-m07 closed 9 months ago

ruru-m07 commented 10 months ago

app-index.js:35 Warning: A props object containing a "key" prop is being spread into JSX: let props = {key: someKey, rx: ..., fill: ..., width: ..., height: ..., x: ..., y: ..., render: ..., value: ..., data-date: ..., data-index: ..., data-row: ..., data-column: ...}; <Rect {...props} /> React keys must be passed directly to JSX without using spread: let props = {rx: ..., fill: ..., width: ..., height: ..., x: ..., y: ..., render: ..., value: ..., data-date: ..., data-index: ..., data-row: ..., data-column: ...}; <Rect key={someKey} {...props} />

image

<HeatMap
              value={value}
              width={700}
              style={{
                color: "#fafafa",
              }}
              legendCellSize={0}
              rectSize={10}
              startDate={
                new Date(new Date().setDate(new Date().getDate() - 365))
              }
              endDate={new Date()}
              monthLabels={[
                "Jan",
                "Feb",
                "Mar",
                "Apr",
                "May",
                "Jun",
                "Jul",
                "Aug",
                "Sep",
                "Oct",
                "Nov",
                "Dec",
              ]}
              weekLabels={["", "Mon", "", "Wed", "", "Fri", ""]}
              panelColors={{
                0: "#202020",
                2: "#525252",
                4: "#71717a",
                10: "#a3a3a3",
                20: "#d4d4d4",
                30: "#e5e5e5",
              }}
              rectProps={{
                rx: 2.5,
              }}
            />

image

image

image

"@uiw/react-heat-map": "^2.2.1",

nextjs 14.

need help

jaywcjlove commented 10 months ago

@ruru-m07 If you can provide an example of a reproducible error, I'll take a look.

ruru-m07 commented 10 months ago

@jaywcjlove i have not more info! but i also provide u all info what u need more???

jaywcjlove commented 10 months ago

@ruru-m07 Provide examples of reproducible errors

greengem commented 9 months ago

Happening to me too. with a default next 14 project and using the lib in a file marked 'use client'

Warning: A props object containing a "key" prop is being spread into JSX:

I'll try to get a reproducible project up over the weekend

greengem commented 9 months ago

@jaywcjlove https://github.com/greengem/react-heat-map-issue I kept the project as simple as possible

jaywcjlove commented 9 months ago

@greengem thx! I fixed. upgrade v2.2.2

greengem commented 9 months ago

@greengem thx! I fixed. upgrade v2.2.2

thanks. working great for me now