Unstyled, dev error overlays for SolidJS
MIT License
Unstyled, headless Error Overlay for SolidJS
npm i solid-error-overlay
yarn add solid-error-overlay
pnpm add solid-error-overlay
import { ErrorOverlay } from 'solid-error-overlay';
<ErrorOverlay onError={(error) => handleError(error)}>
<App />
</ErrorOverlay>
The <ErrorOverlay>
component is unstyled and headless, therefore it is highly customizable.
The internal structure of the component is as follows:
<ErrorOverlayContainer>
<ErrorOverlayNavbar>
<ErrorOverlayPagination>
<ErrorOverlayPrevButton />
<ErrorOverlayNextButton />
<ErrorOverlayPageCounter />
</ErrorOverlayPagination>
<ErrorOverlayControls>
<ErrorOverlayToggleCompiledButton />
<ErrorOverlayResetButton />
</ErrorOverlayControls>
</ErrorOverlayNavbar>
<ErrorOverlayContent>
<ErrorOverlayErrorInfo />
<ErrorOverlayStackFrames>
<ErrorOverlayCompiledStackFrame />
<ErrorOverlayOriginalStackFrame />
</ErrorOverlayStackFrames>
</ErrorOverlayContent>
</ErrorOverlayContainer>
Each of the components can be overriden through <ErrorOverlay>
's props:
<ErrorOverlay
ErrorOverlayPrevButton={(props) => (
<button onClick={props.onClick}>Previous</button>
)}
{...overrides}
>
<App />
</ErrorOverlay>
See the demo for expanded use.
MIT © lxsmnsyc