Component States

Each component manages its own state, for basic use cases as below:

1. Loading: Triggers when fetching and waiting for data
2. Blank: Triggers when no data is available
3. Error: When there is some error

By default, states are being handled using pre-designed components in the library. However, you can easily override the states of any component by passing componentStates prop to the respective component. Here is the data format or type of the component states:

Usage

You can pass any valid JSX for each state property, which can be JSX/React Component. For instance:

const componentStates = {

blank: <SomeComponent />,

error: () => "You can pass string as JSX",

blank: () => <TaDa />

}

<BubbleChart url="server/api/data" componentStates={componentStates}/>

CustomType

ComponentStates

type ComponentStates = {

blank?: JSX.Element | (() => JSX.Element),

error?: (props: {

error: boolean,

message: string,

refetch: Function,

}) => JSX.Element,

loading?: JSX.Element,

};

Props Passed to Error Component

1. refetch: () => void is a function which can be called to refetch the data
2. message prop so that user can render an error message as required