Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ResponsiveBar prop types don't align with documentation

See original GitHub issue

Describe/explain the bug

When applying the label prop to ResponsiveBar Nivo will only allow functions that return strings, rather than functions that return SVG Elements.

To Reproduce

Steps to reproduce the behavior:

Create a function that accepts BarDatum and returns an SVG element
Pass it to <ResponsiveBar />

Expected behavior

TypeScript allows me to pass a function that returns an SVGAElement without me having to cast the return type with as unknown as string.

TypeScript TS 4.3.5

Additional context

This issue seems to stem from the fact that BarSvgProps extends BarCommonProps, which uses the Nivo core PropertyAccessor. The second type parameter is string, which is true for Canvas charts, but for SVG charts, it should also allow SVGAElement (PropertyAccessor<Datum, string | SVGAElement>)

Issue Analytics

State:
Created 2 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

Tbhesswebbercommented, Aug 25, 2021

@plouc - Can you clarify how those solutions would look? I don’t see a way to do this without type casting even with your hints…

On a different note, I’m also confused why blocking this would be a preferable route over making the actual API surface align with the documented one

0reactions

Ayush11139commented, Aug 30, 2022

Can someone tell me How to keep label values above bars in bargraph?

Top Results From Across the Web

Validating Props easily with React PropTypes - codeburst

React PropTypes are a good way to help you catching bugs by validating data types of values passed through props.

At least one required prop in React - Stack Overflow

I wrote this helper to solve the same problem in a re-usable way. You use it like a propType function: MyComponent. propTypes =...

Typechecking With PropTypes - React

To run typechecking on the props for a component, you can assign the special propTypes property: import PropTypes from 'prop-types'; class Greeting extends ......

'data' is missing in props validation - You.com | The AI Search ...

I am getting this error: 'data' is missing in props validation eslint(react/prop-types). What am I missing? eslint (react/prop-type) was referenced, ...

I'm Breaking up with Higher Order Components. | - Medium

import PropTypes from 'prop-types';class Caffeinate extends Component { ... We don't have to worry about prop name conflicts with other ...