chayns-helper v3.3.0
Installation
npm install chayns-helperPeer Dependencies
reactchayns-componentschayns-logger(optional)
This package supports tree-shaking, so each module will only be included in your bundle if it is imported by you or another module.
Contents
- Essentials
- Chayns Services and Utilities
- UI and Forms
- React Utilities
- Utilities For Other Packages
- Miscellaneous Utilities
Essentials
| Name | Description | Type |
|---|---|---|
| ErrorBoundary | Customizable ErrorBoundary to catch errors during render | Component |
| HttpClient | HttpRequest Helper, highly customizable | Function, Constants |
Chayns Services and Utilities
| Name | Description | Type |
|---|---|---|
| addChaynsLoginListener | Similar to addAccessTokenChangeListener, but prevent reload on login/logout in a pagemaker iframe as well | Function |
| chaynsDialogs | makes using chayns dialogs much more comfortable | Functions |
| enableBodyScroll | enable or disable scrolling | Function |
| getChaynsErrorCode | get the error code of a chayns error response. Can deal with Response, Promise and Object | Function |
| getTextStrings | get one or more text strings with fallbacks and prefix | Function |
| hideCWFooter | hide the chayns web footer | Function |
| isChaynsError | determine whether something is a chayns error. Can deal with Response, Promise and Object | Function |
| isCustomTappIFrame | check if application is in custom tapp iframe | Function |
| isPagemakerIFrame | check if application is in pagemaker iframe | Function |
| removeChaynsLoginListener | remove the chaynsLoginListener | Function |
| setReloadOnLogin | enable/disable reload on login/logout for pagemaker iframes | Function |
| setViewMode | toggle exclusive mode | Function |
| showWaitCursor | helper for chayns.showWaitCursor with a timeout before displaying | Function |
| TextStringComplex | Memoized Textstring Component with prefix config and auto creation | Component |
| useFullscreenTapp | Hook to create a fullscreen tapp without scrolling | Hook |
| useTextStrings | get memoized TextStrings from a list of string names | Hook |
| useUser | chayns.getUser() hook | Hook |
| useWebsocketService | configure a tobit-websocket-service-client | Hook |
| WebSocketClient | custom alternative to tobit-websocket-service-client | Class |
UI and Forms
| Name | Description | Type |
|---|---|---|
| CenteredContainer | Container to center its children with or without a gap between them | Component |
| CenteredWaitCursor | Inline-waitCursor, centered and with padding | Component |
| DataRow | Container for a row with a label and e.g. a button | Component |
| MoneyInput | A wrapper for the chayns-component Input to handle money values | Component |
| ResizableWaitCursor | chayns SmallWaitCursor but resizable | Component |
| RestrictedAccordion | Accordion with lock-icon for admins | Component |
| UACGroupChooseButton | ChooseButton for UAC groups | Component |
| useClampLines | a hook to restrict a text to a maxHeight or max lines | Hook |
| useTimeoutState | useState that calls an onChange method if the value hasn't change for a certain time | Hook |
React Utilities
| Name | Description | Type |
|---|---|---|
| getHookState | get the current state of a hook via the setState function | Function |
| jsxReplace | replace strings or regex matches in a string with other strings or jsx | Function |
| refresh | HOC to rerender a Component in an interval | HOC |
| RefreshComponent | Component to rerender its children in an interval | Component |
| rerender | HOC that passes a rerenderSelf function to a component | HOC |
| SuspenseWaitCursor | Suspense-Component that provides a fallback for React lazy loading | Component |
| useExtendedState | useState hook with async getter and prevState | Hook |
| usePrevious | access a value from a previous render | Hook |
| usePreviousEffect | useEffect hook that can access the previous values of its dependencies | Hook |
| useUniqueInterval | clears a previous interval when a new one is set | Hook |
| useUniqueTimeout | clears a previous timeout when a new one is set | Hook |
| useUpdateEffect | useEffect() hook that won't run on the first render | Hook |
Utilities For Other Packages
| Name | Package | Description | Type |
|---|---|---|---|
| fnsFormat | date-fns | date-fns format with option to use today/tomorrow/yesterday and add the year if it's not the current year | Function |
| generateRechartsAxis | recharts | a function to generate a better recharts axis | Function |
| RechartsAxis | recharts | Wrapper for recharts' XAxis or YAxis to create better label intervals | Component |
| useRechartsAxis | recharts | a hook to generate a better recharts axis | Hook |
| useComparingSelector | redux | a useSelector Hook with shallowEqual/deepEqual | Hook |
Miscellaneous Utilities
| Name | Description | Type |
|---|---|---|
| copyToClipboard | copy a value to the user's clipboard | Function |
| deepEqual | recursive implementation of shallowEqual | Function |
| distinct | remove duplicate array values | Function |
| forEachKey | forEach function for objects | Function |
| generateGuid | generate a GUID | Function |
| getJsonSettings | pass as second param to JSON.stringify to modify the serialization | Function |
| getJwtPayload | safely get JWT token payload | Function |
| hexToRgb | Convert a hex color to an rgb object which returns a rgba() css function when stringified | Function |
| isPlainObject | check if a value is a plain JS object | Function |
| mapObject | map function for objects | Function |
| recursiveReplace | recursive string replacement | Function |
| reduceObject | reduce function for objects | Function |
| shallowEqual | check 2 values for equality | Function |
| statusAnimations | success and failure animation html string for dialogs | Constant |
| stringToColor | Convert a string to a hex color or rgb color object which returns a rgba() css function when stringified | Function |
| time | constant for times based on ms | Constant |
| toHslColor | Convert a string or int to an hsl color object which returns a hsl() css function when stringified | Function |
Other
Custom Logger
By default, this package will use the private chayns-logger package for logging. If you want to use a custom logger,
you can specify a custom logger:
// init
setCustomLogger({
debug(data) { },
info(data) { },
warning(data, error) { },
error(data, error) { },
critical(data, error) { }
})Regular log data will look like this:
const logData = {
message: 'Log message',
data: { /* object with custom log data */ },
section: 'file.js'
}If any of these functions is not defined it will use the default value of console.debug|log|warn|error, depending on
log level.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago