chayns-helper
A variety of useful helpers for chayns development.
Installation
npm install chayns-helper
Peer Dependencies
react
chayns-components
-
chayns-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
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.