Example with react hooks usage?

[kirankalyan5]

Description

Is there an example of using this library with react hooks?

[anajavi]

It depends on what do you want to accomplish using hooks? Can you please describe your use case?

Currently the hooks provided can be used to extend the functionality. For example:
https://whawker.github.io/react-jsx-highcharts/examples/CustomComponent/

[kirankalyan5]

Hi, @anajavi thanks for the quick response. I'm currently using highcharts-react-official in my project. Now I was planning to introduce more configurable options in terms of having a dynamic chart type, x-axis & y-axis, etc. When I was evaluating I came across your library which looked good(Kudos to you and your team).

In terms of hooks, I saw your recent release notes where you have migrated from HOC to hooks and I was curious to find out more examples as some the current example code were still on HOC's.

PS. I have not yet decided what I will achieve with the help of hooks in this library but I wanted to learn how this library could help achieve the configurable options I'm trying to.

Your ideas are much appreciated.
Thanks

[anajavi]

The examples are still using withHighcharts hook, which can be replaced with <HighchartsProvider> component. The withHighcharts HOC is provided for backwards compatibility.

I don't think you need any hooks for the dynamic chart type and axes. Updating chart type for example was just fixed in v4.0.1 in #265. Axes can be added dynamically too just by adding and removing <XAxis> and <YAxis> components.

Here's an example of changing chart type: https://stackblitz.com/edit/react-1zdbcb?file=Hello.js

[kirankalyan5]

Thank you, I will have a check.

[kirankalyan5]

@anajavi does it have support for typescript, if yes is @types definition a separate package?

I can still declare module 'react-jsx-highcharts'; but I lose the benefits of typescript.
I saw #113, is there any outcome?
Let me know if I have missed anything.

Thanks.

[anajavi]

@anajavi does it have support for typescript, if yes is @types definition a separate package?

There's no typescript typings as far as I know. Highcharts itself seems to have them now, so it might not be such an huge task anymore.

react-jsx-highcharts doesn't have too many typings for itself, most are just passed to highcharts so any typings should just reference highcharts types.

a PR would be welcome.

I saw #113, is there any outcome?

There are no flow typings for Highcharts, so making them for this library is a huge task.

[kirankalyan5]

@anajavi 👍