@betgames/bg-tools
v3.1.3
Published
Sharable Hooks and Utils
Downloads
621
Readme
bg-tools
This package has a lot of common features for all projects.
Hooks /
useAfterUpdate
useFade
useFont
useLandscape
useMobileView
useMounted
useMutableState
useOrientationAngle
useRefCallback
useScrollbar
useUnmount
useWindowsSize
useScreenOrientation
useTimerFinished
useSecondsLeft
Utils /
amountTok
calcSecondsLeft
camelCaseKeys
forceCast
formatAmount
formatBettingOptions
formatToCurrency
getLocationOrigin
getValidUrl
isInputNumber
isLandscape
parseQuery
roundToSeconds
roundValue
setImmediateTimeout
sortBy
templateReplace
visibility
timersRegistry
Repository /
Storage
Styles /
base
functions
mixins
variables
Services /
audioService
Usage
import { useMobileView } from '@betgames/bg-tools';
const Component = () => {
useMobileView(320);
...
};
Example how to use z-indexes-root function from functions.scss
:
@import '~@betgames/bg-tools/src/styles/functions';
$z-indexes-list: (
example1: (),
example2: (),
);
@function z(layers...){
$z-indexes-constructor($z-indexes-list, layers...)
}
Example how to use RadioButton from bg-tools
- Create your scss file with styles for RadioButton, by default this component haven't color, width, height, only common styles
- For customizing RadioButton, create some variables in scss file. Like here .radio-button { --radio-width: 3.5em; --radio-height: 2em; --radio-border-color: $dark-purple; --radio-icon-height: 1.5em; --radio-icon-width: 1.5em; --radio-icon-bottom-pos: 0.18em; --radio-icon-color: $dark-purple; --radio-background-enabled: $radio-success; --radio-border-color-enabled: $radio-border; --radio-box-shadow-enabled: 0px 0px 4px $radio-success; --radio-icon-transform-x-pos: 1.3em; --radio-icon-color-enabled: $white; }
- Description about each variable --radio-width - Width of Radio button --radio-height - Height of Radio button --radio-border-color - border color of Radio button --radio-icon-height - Height of circle icon in Radio button --radio-icon-width - Width of circle icon in Radio button --radio-icon-bottom-pos - This property needed for setting position of circle-icon by Y axis if you changed height of Radio button --radio-icon-color - Color of circle-icon in Radio button --radio-background-enabled - Background color of Radio button when it enabled --radio-border-color-enabled - Border color of Radio button when it enabled --radio-box-shadow-enabled - Box shadow of Radio button when it enabled --radio-icon-transform-x-pos - This property needed for setting position by X axis of circle-icon when it enabled --radio-icon-color-enabled - Color of circle-icon when it enabled
Usage Timer class.
TESTS
- Run
pnpm test
in command line to run tests
USAGE
- In the root directory
index.js
exposes public API - Webpack must be configured in your project
- First, need to call
durations.setup
once at app start to be setup unit duration units:import { durations } from '@betgames/bg-tools'; durations.setup([ 'years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds', ]);
- For usage simply import the timer:
import { timersRegistry } from '@betgames/bg-tools';
API
const { instance, destroy } = timersRegistry.create(options)
interface ITimerOptions {
id?: number | string; // use it to create shared intances, otherwise random will be generated
seconds: number;
offsetSeconds?: number;
format?: string | Record<number, string>;
onTick?: (timeString: string, secondsLeft: number) => void;
onFinish?(): void;
onUpdate?(): void;
onAfterExactSecond?: {
second: number;
callback: {
(): void;
called?: boolean;
};
};
showDurationUnits?: boolean;
}
Timer instance
interface ITimerInstance {
stop(): void;
subscribe(options: ITimerSubscribeOptions): () => void;
update(seconds: number): void;
}
format
Parameter format
can be used as string, e.g.: HMS
,
or object: { 60: 'HM', 0: 'S' }
,
which means: "show hours and minutes until countdown reaches 60 seconds, then show seconds until reaches 0 seconds".
Supported format values: Y
(year), O
(month), D
(day), H
(hour), M
(minute), S
(second), also lowercase letters.
showDurationUnits
If parameter showDurationUnits
value is set to true
, then units for each period are displayed:
e.g.: 1h 5min 30s
, 6h 20min
, 25s
.