BaseDashboard class
The base component that provides basic functionality to create a dashboard.
- Extends
-
Component<P, S & BaseDashboardState>
Constructors
Base |
Constructor of BaseDashboard. |
Inherited Properties
context | If using the new style context, re-declare this in your class to be the
Example
See React Docs |
context |
If set, Example
See https://react.dev/reference/react/Component#static-contexttype |
props | |
refs | |
state |
Methods
component |
Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint. |
component |
Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements. |
layout() | Override this method to define the layout of the widget in the dashboard. |
render() | Defines the default layout for the dashboard. |
styling() | Override this method to customize the dashboard style. |
Inherited Methods
component |
Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount. |
component |
Called immediately after updating occurs. Not called for the initial render. The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null. |
component |
Called immediately before mounting occurs, and before <xref:Component.render>. Avoid introducing any side-effects or subscriptions in this method. Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked. See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path |
component |
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes. Calling <xref:Component.setState> generally does not trigger this method. Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked. See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path |
component |
Called immediately before rendering when new props or state is received. Not called for the initial render. Note: You cannot call <xref:Component.setState> here. Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked. See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path |
force |
|
get |
Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it. Note: the presence of this method prevents any of the deprecated lifecycle events from running. |
set |
|
should |
Called to determine whether the change in props and state should trigger a re-render.
If false is returned, <xref:Component.render>, |
UNSAFE_component |
Called immediately before mounting occurs, and before <xref:Component.render>. Avoid introducing any side-effects or subscriptions in this method. This method will not stop working in React 17. Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked. See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path |
UNSAFE_component |
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes. Calling <xref:Component.setState> generally does not trigger this method. This method will not stop working in React 17. Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked. See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path |
UNSAFE_component |
Called immediately before rendering when new props or state is received. Not called for the initial render. Note: You cannot call <xref:Component.setState> here. This method will not stop working in React 17. Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked. See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path |
Constructor Details
BaseDashboard<P, S>(Readonly<P>)
Constructor of BaseDashboard.
new BaseDashboard(props: Readonly<P>)
Parameters
- props
-
Readonly<P>
The properties for the dashboard.
Inherited Property Details
context
If using the new style context, re-declare this in your class to be the
React.ContextType
of your static contextType
.
Should be used with type annotation or static contextType.
Example
static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
See React Docs
context: unknown
Property Value
unknown
Inherited From Component.context
contextType
If set, this.context
will be set at runtime to the current value of the given Context.
Example
type MyContext = number
const Ctx = React.createContext<MyContext>(0)
class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}
See https://react.dev/reference/react/Component#static-contexttype
static contextType?: Context<any>
Property Value
Context<any>
Inherited From Component.contextType
props
props: Readonly<P>
Property Value
Readonly<P>
Inherited From Component.props
refs
Warning
This API is now deprecated.
refs: {[key: string]: ReactInstance}
Property Value
{[key: string]: ReactInstance}
Inherited From Component.refs
state
state: Readonly<S & BaseDashboardState>
Property Value
Readonly<S & BaseDashboardState>
Inherited From Component.state
Method Details
componentDidMount()
Called after the component is mounted. You can do initialization that requires DOM nodes here. You can also make network requests here if you need to load data from a remote endpoint.
function componentDidMount(): Promise<void>
Returns
Promise<void>
componentWillUnmount()
Called before the component is unmounted and destroyed. You can do necessary cleanup here, such as invalidating timers, canceling network requests, or removing any DOM elements.
function componentWillUnmount()
layout()
Override this method to define the layout of the widget in the dashboard.
function layout(): undefined | Element
Returns
undefined | Element
The layout of the widget in the dashboard.
render()
Defines the default layout for the dashboard.
function render(): Element
Returns
Element
styling()
Override this method to customize the dashboard style.
function styling(): string
Returns
string
The className for customizing the dashboard style.
Inherited Method Details
componentDidCatch(Error, ErrorInfo)
Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.
function componentDidCatch(error: Error, errorInfo: ErrorInfo)
Parameters
- error
-
Error
- errorInfo
-
ErrorInfo
Inherited From Component.componentDidCatch
componentDidUpdate(Readonly<P>, Readonly<S & BaseDashboardState>, any)
Called immediately after updating occurs. Not called for the initial render.
The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
function componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S & BaseDashboardState>, snapshot?: any)
Parameters
- prevProps
-
Readonly<P>
- prevState
-
Readonly<S & BaseDashboardState>
- snapshot
-
any
Inherited From Component.componentDidUpdate
componentWillMount()
Warning
This API is now deprecated.
16.3, use componentDidMount or the constructor instead; will stop working in React 17
Called immediately before mounting occurs, and before <xref:Component.render>. Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
function componentWillMount()
Inherited From Component.componentWillMount
componentWillReceiveProps(Readonly<P>, any)
Warning
This API is now deprecated.
16.3, use static getDerivedStateFromProps instead; will stop working in React 17
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling <xref:Component.setState> generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
function componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any)
Parameters
- nextProps
-
Readonly<P>
- nextContext
-
any
Inherited From Component.componentWillReceiveProps
componentWillUpdate(Readonly<P>, Readonly<S & BaseDashboardState>, any)
Warning
This API is now deprecated.
16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call <xref:Component.setState> here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
function componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S & BaseDashboardState>, nextContext: any)
Parameters
- nextProps
-
Readonly<P>
- nextState
-
Readonly<S & BaseDashboardState>
- nextContext
-
any
Inherited From Component.componentWillUpdate
forceUpdate(() => void)
function forceUpdate(callback?: () => void)
Parameters
- callback
-
() => void
Inherited From Component.forceUpdate
getSnapshotBeforeUpdate(Readonly<P>, Readonly<S & BaseDashboardState>)
Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.
Note: the presence of this method prevents any of the deprecated lifecycle events from running.
function getSnapshotBeforeUpdate(prevProps: Readonly<P>, prevState: Readonly<S & BaseDashboardState>): any
Parameters
- prevProps
-
Readonly<P>
- prevState
-
Readonly<S & BaseDashboardState>
Returns
any
Inherited From Component.getSnapshotBeforeUpdate
setState<K>(null | (S & BaseDashboardState) | (prevState: Readonly<S & BaseDashboardState>, props: Readonly<P>) => null | (S & BaseDashboardState) | Pick<S & BaseDashboardState, K> | Pick<S & BaseDashboardState, K>, () => void)
function setState<K>(state: null | (S & BaseDashboardState) | (prevState: Readonly<S & BaseDashboardState>, props: Readonly<P>) => null | (S & BaseDashboardState) | Pick<S & BaseDashboardState, K> | Pick<S & BaseDashboardState, K>, callback?: () => void)
Parameters
- state
-
null | (S & BaseDashboardState) | (prevState: Readonly<S & BaseDashboardState>, props: Readonly<P>) => null | (S & BaseDashboardState) | Pick<S & BaseDashboardState, K> | Pick<S & BaseDashboardState, K>
- callback
-
() => void
Inherited From Component.setState
shouldComponentUpdate(Readonly<P>, Readonly<S & BaseDashboardState>, any)
Called to determine whether the change in props and state should trigger a re-render.
Component
always returns true.
PureComponent
implements a shallow comparison on props and state and returns true if any
props or states have changed.
If false is returned, <xref:Component.render>, componentWillUpdate
and componentDidUpdate
will not be called.
function shouldComponentUpdate(nextProps: Readonly<P>, nextState: Readonly<S & BaseDashboardState>, nextContext: any): boolean
Parameters
- nextProps
-
Readonly<P>
- nextState
-
Readonly<S & BaseDashboardState>
- nextContext
-
any
Returns
boolean
Inherited From Component.shouldComponentUpdate
UNSAFE_componentWillMount()
Called immediately before mounting occurs, and before <xref:Component.render>. Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
function UNSAFE_componentWillMount()
Inherited From Component.UNSAFE_componentWillMount
UNSAFE_componentWillReceiveProps(Readonly<P>, any)
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling <xref:Component.setState> generally does not trigger this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
function UNSAFE_componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any)
Parameters
- nextProps
-
Readonly<P>
- nextContext
-
any
Inherited From Component.UNSAFE_componentWillReceiveProps
UNSAFE_componentWillUpdate(Readonly<P>, Readonly<S & BaseDashboardState>, any)
Warning
This API is now deprecated.
16.3, use getSnapshotBeforeUpdate instead
Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call <xref:Component.setState> here.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update See https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
function UNSAFE_componentWillUpdate(nextProps: Readonly<P>, nextState: Readonly<S & BaseDashboardState>, nextContext: any)
Parameters
- nextProps
-
Readonly<P>
- nextState
-
Readonly<S & BaseDashboardState>
- nextContext
-
any
Inherited From Component.UNSAFE_componentWillUpdate