react-native-toast-message 2.3.3 → 2.5.0

package/README.md

@@ -20,8 +20,6 @@ Animated toast message component for React Native.
 
 ## Documentation
 
-> This is the documentation for `react-native-toast-message@v2`, which has a similar API to v1, but contains a few important changes. [Read the complete changelog](https://github.com/calintamas/react-native-toast-message/releases/tag/v2.0.0).
-
 - [Quick start](./docs/quick-start.md)
 - [API](./docs/api.md)
 - [Create custom layouts](./docs/custom-layouts.md)

package/lib/src/ToastUI.js

@@ -10,7 +10,7 @@ const defaultToastConfig = {
 };
 function renderComponent({ data, options, config, isVisible, show, hide }) {
     const { text1, text2 } = data;
-    const { type, onPress, text1Style, text2Style, position, props } = options;
+    const { type, onPress, text1Style, text2Style, position, visibilityTime, props } = options;
     const toastConfig = {
         ...defaultToastConfig,
         ...config
@@ -23,6 +23,7 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
         position,
         type,
         isVisible,
+        visibilityTime,
         text1,
         text2,
         text1Style,
@@ -35,8 +36,8 @@ function renderComponent({ data, options, config, isVisible, show, hide }) {
 }
 export function ToastUI(props) {
     const { isVisible, options, hide } = props;
-    const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable } = options;
-    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} avoidKeyboard={avoidKeyboard} swipeable={swipeable} onHide={hide}>
+    const { position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, swipeable, animationConfig } = options;
+    return (<AnimatedContainer isVisible={isVisible} position={position} topOffset={topOffset} bottomOffset={bottomOffset} keyboardOffset={keyboardOffset} avoidKeyboard={avoidKeyboard} swipeable={swipeable} animationConfig={animationConfig} onHide={hide}>
       {renderComponent(props)}
     </AnimatedContainer>);
 }

package/lib/src/components/AnimatedContainer.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PanResponderGestureState } from 'react-native';
-import { ReactChildren, ToastPosition } from '../types';
+import { ReactChildren, ToastAnimationConfig, ToastPosition } from '../types';
 export declare type AnimatedContainerProps = {
     children: ReactChildren;
     isVisible: boolean;
@@ -10,6 +10,7 @@ export declare type AnimatedContainerProps = {
     bottomOffset: number;
     keyboardOffset: number;
     avoidKeyboard: boolean;
+    animationConfig?: ToastAnimationConfig;
     onHide: () => void;
     onRestorePosition?: () => void;
 };
@@ -21,4 +22,4 @@ export declare type AnimatedContainerProps = {
  */
 export declare function dampingFor(gesture: PanResponderGestureState, position: ToastPosition): number;
 export declare function animatedValueFor(gesture: PanResponderGestureState, position: ToastPosition, damping: number): number;
-export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, onHide, onRestorePosition, swipeable }: AnimatedContainerProps): JSX.Element;
+export declare function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig, onHide, onRestorePosition, swipeable }: AnimatedContainerProps): JSX.Element;

package/lib/src/components/AnimatedContainer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated, Dimensions } from 'react-native';
 import { useLogger, useGesture } from '../contexts';
-import { usePanResponder, useSlideAnimation, useViewDimensions } from '../hooks';
+import { useIsomorphicLayoutEffect, usePanResponder, useSlideAnimation, useViewDimensions } from '../hooks';
 import { noop } from '../utils/func';
 import { bound } from '../utils/number';
 import { getTestId } from '../utils/test-id';
@@ -37,7 +37,7 @@ export function animatedValueFor(gesture, position, damping) {
             throw new Error(`Toast position: ${position} not implemented`);
     }
 }
-export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, onHide, onRestorePosition = noop, swipeable }) {
+export function AnimatedContainer({ children, isVisible, position, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig, onHide, onRestorePosition = noop, swipeable }) {
     const { log } = useLogger();
     const { panning } = useGesture();
     const { computeViewDimensions, height } = useViewDimensions();
@@ -47,7 +47,8 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         topOffset,
         bottomOffset,
         keyboardOffset,
-        avoidKeyboard
+        avoidKeyboard,
+        animationConfig
     });
     const disable = !swipeable || !isVisible;
     const onStart = React.useCallback(() => {
@@ -82,7 +83,7 @@ export function AnimatedContainer({ children, isVisible, position, topOffset, bo
         onEnd,
         disable,
     });
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
         const newAnimationValue = isVisible ? 1 : 0;
         animate(newAnimationValue);
     }, [animate, isVisible]);

package/lib/src/components/BaseToast.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { BaseToastProps } from '../types';
-export declare function BaseToast({ text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines, text1Props, text2Style, text2NumberOfLines, text2Props, renderLeadingIcon, renderTrailingIcon }: BaseToastProps): React.ReactElement;
+export declare function BaseToast({ testID, text1, text2, onPress, activeOpacity, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines, text1Props, text2Style, text2NumberOfLines, text2Props, renderLeadingIcon, renderTrailingIcon }: BaseToastProps): React.ReactElement;

package/lib/src/components/BaseToast.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Text, View, TouchableOpacity } from 'react-native';
+import { Text, TouchableOpacity, View } from 'react-native';
 import { getTestId } from '../utils/test-id';
 import { styles } from './BaseToast.styles';
-export function BaseToast({ text1, text2, onPress, activeOpacity = 1, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {
-    return (<TouchableOpacity testID={getTestId('TouchableContainer')} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
+export function BaseToast({ testID = 'toast', text1, text2, onPress, activeOpacity = 1, style, touchableContainerProps, contentContainerStyle, contentContainerProps, text1Style, text1NumberOfLines = 1, text1Props, text2Style, text2NumberOfLines = 1, text2Props, renderLeadingIcon, renderTrailingIcon }) {
+    return (<TouchableOpacity testID={getTestId('TouchableContainer', testID)} onPress={onPress} activeOpacity={activeOpacity} style={[styles.base, styles.leadingBorder, style]} {...touchableContainerProps}>
       {renderLeadingIcon && renderLeadingIcon()}
-      <View testID={getTestId('ContentContainer')} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
-        {(text1?.length ?? 0) > 0 && (<Text testID={getTestId('Text1')} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
+      <View testID={getTestId('ContentContainer', testID)} style={[styles.contentContainer, contentContainerStyle]} {...contentContainerProps}>
+        {(text1?.length ?? 0) > 0 && (<Text testID={getTestId('Text1', testID)} style={[styles.text1, text1Style]} numberOfLines={text1NumberOfLines} ellipsizeMode='tail' {...text1Props}>
             {text1}
           </Text>)}
-        {(text2?.length ?? 0) > 0 && (<Text testID={getTestId('Text2')} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
+        {(text2?.length ?? 0) > 0 && (<Text testID={getTestId('Text2', testID)} style={[styles.text2, text2Style]} numberOfLines={text2NumberOfLines} ellipsizeMode='tail' {...text2Props}>
             {text2}
           </Text>)}
       </View>

package/lib/src/components/BaseToast.styles.d.ts

@@ -3,18 +3,26 @@ export declare const WIDTH = 340;
 export declare const BORDER_RADIUS = 6;
 export declare const styles: {
     base: {
+        elevation: number;
+        backgroundColor: string;
+        boxShadow: string;
         flexDirection: "row";
         height: number;
         width: number;
         borderRadius: number;
-        shadowOffset: {
-            width: number;
-            height: number;
-        };
-        shadowOpacity: number;
-        shadowRadius: number;
+    } | {
         elevation: number;
         backgroundColor: string;
+        shadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        shadowOpacity?: number | undefined;
+        shadowRadius?: number | undefined;
+        flexDirection: "row";
+        height: number;
+        width: number;
+        borderRadius: number;
     };
     leadingBorder: {
         borderLeftWidth: number;

package/lib/src/components/BaseToast.styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 export const HEIGHT = 60;
 export const WIDTH = 340;
 export const BORDER_RADIUS = 6;
@@ -8,9 +8,16 @@ export const styles = StyleSheet.create({
         height: HEIGHT,
         width: WIDTH,
         borderRadius: BORDER_RADIUS,
-        shadowOffset: { width: 0, height: 0 },
-        shadowOpacity: 0.1,
-        shadowRadius: BORDER_RADIUS,
+        ...Platform.select({
+            web: {
+                boxShadow: `0px 0px ${BORDER_RADIUS}px rgba(0, 0, 0, 0.1)`
+            },
+            default: {
+                shadowOffset: { width: 0, height: 0 },
+                shadowOpacity: 0.1,
+                shadowRadius: BORDER_RADIUS
+            }
+        }),
         elevation: 2,
         backgroundColor: '#FFF'
     },

package/lib/src/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './useSlideAnimation';
 export * from './useTimeout';
 export * from './usePanResponder';
 export * from './useKeyboard';
+export * from './useIsomorphicLayoutEffect';

package/lib/src/hooks/index.js

@@ -3,3 +3,4 @@ export * from './useSlideAnimation';
 export * from './useTimeout';
 export * from './usePanResponder';
 export * from './useKeyboard';
+export * from './useIsomorphicLayoutEffect';

package/lib/src/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/lib/src/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
+export const useIsomorphicLayoutEffect = typeof globalThis.window !== 'undefined'
+    ? useLayoutEffect
+    : useEffect;

package/lib/src/hooks/usePanResponder.d.ts

@@ -17,4 +17,5 @@ export declare function usePanResponder({ animatedValue, computeNewAnimatedValue
     onGrant: () => void;
     onMove: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
     onRelease: (_event: GestureResponderEvent, gesture: PanResponderGestureState) => void;
+    onTerminate: () => void;
 };

package/lib/src/hooks/usePanResponder.js

@@ -40,18 +40,26 @@ export function usePanResponder({ animatedValue, computeNewAnimatedValueForGestu
             onRestore();
         }
     }, [computeNewAnimatedValueForGesture, onEnd, onDismiss, onRestore, disable]);
+    const onTerminate = React.useCallback(() => {
+        onEnd();
+        if (disable)
+            return;
+        onRestore();
+    }, [onEnd, onRestore, disable]);
     const panResponder = React.useMemo(() => PanResponder.create({
         onStartShouldSetPanResponder: startShouldSetPanResponder,
         onPanResponderGrant: onGrant,
         onMoveShouldSetPanResponder: moveShouldSetPanResponder,
         onMoveShouldSetPanResponderCapture: moveShouldSetPanResponder,
         onPanResponderMove: onMove,
-        onPanResponderRelease: onRelease
-    }), [onMove, onRelease, onGrant]);
+        onPanResponderRelease: onRelease,
+        onPanResponderTerminate: onTerminate
+    }), [onMove, onRelease, onTerminate, onGrant]);
     return {
         panResponder,
         onGrant,
         onMove,
         onRelease,
+        onTerminate
     };
 }

package/lib/src/hooks/useSlideAnimation.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Animated } from 'react-native';
-import { ToastPosition } from '../types';
+import { ToastAnimationConfig, ToastPosition } from '../types';
 declare type UseSlideAnimationParams = {
     position: ToastPosition;
     height: number;
@@ -8,11 +8,12 @@ declare type UseSlideAnimationParams = {
     bottomOffset: number;
     keyboardOffset: number;
     avoidKeyboard: boolean;
+    animationConfig?: ToastAnimationConfig;
 };
 export declare function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset, avoidKeyboard }: UseSlideAnimationParams & {
     keyboardHeight: number;
 }): number[];
-export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard }: UseSlideAnimationParams): {
+export declare function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig }: UseSlideAnimationParams): {
     animatedValue: React.MutableRefObject<Animated.Value>;
     animate: (toValue: number) => void;
     animationStyles: {

package/lib/src/hooks/useSlideAnimation.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Animated, Platform } from 'react-native';
 import { additiveInverseArray } from '../utils/array';
+import { resolveAnimationConfig } from '../utils/animationConfig';
 import { useKeyboard } from './useKeyboard';
 export function translateYOutputRangeFor({ position, height, topOffset, bottomOffset, keyboardHeight, keyboardOffset, avoidKeyboard }) {
     const offset = position === 'bottom' ? bottomOffset : topOffset;
@@ -13,16 +14,28 @@ const useNativeDriver = Platform.select({
     ios: true,
     default: false
 });
-export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard }) {
+export function useSlideAnimation({ position, height, topOffset, bottomOffset, keyboardOffset, avoidKeyboard, animationConfig }) {
     const animatedValue = React.useRef(new Animated.Value(0));
     const { keyboardHeight } = useKeyboard();
     const animate = React.useCallback((toValue) => {
-        Animated.spring(animatedValue.current, {
-            toValue,
-            useNativeDriver,
-            friction: 8
-        }).start();
-    }, []);
+        const resolved = resolveAnimationConfig(animationConfig, toValue === 1 ? 'enter' : 'exit');
+        if (resolved.type === 'timing') {
+            const { type: _type, ...timingConfig } = resolved;
+            Animated.timing(animatedValue.current, {
+                ...timingConfig,
+                toValue,
+                useNativeDriver
+            }).start();
+        }
+        else {
+            const { type: _type, ...springConfig } = resolved;
+            Animated.spring(animatedValue.current, {
+                ...springConfig,
+                toValue,
+                useNativeDriver
+            }).start();
+        }
+    }, [animationConfig]);
     const translateY = React.useMemo(() => animatedValue.current.interpolate({
         inputRange: [0, 1],
         outputRange: translateYOutputRangeFor({

package/lib/src/types/index.d.ts

@@ -1,8 +1,19 @@
 import React from 'react';
-import { StyleProp, TextProps, TextStyle, TouchableOpacityProps, ViewProps, ViewStyle } from 'react-native';
+import { Animated, StyleProp, TextProps, TextStyle, TouchableOpacityProps, ViewProps, ViewStyle } from 'react-native';
 export declare type ReactChildren = React.ReactNode;
 export declare type ToastType = 'success' | 'error' | 'info' | (string & {});
 export declare type ToastPosition = 'top' | 'bottom';
+export declare type ToastSpringAnimationConfig = {
+    type: 'spring';
+} & Omit<Parameters<typeof Animated.spring>[1], 'useNativeDriver' | 'toValue'>;
+export declare type ToastTimingAnimationConfig = {
+    type: 'timing';
+} & Omit<Parameters<typeof Animated.timing>[1], 'useNativeDriver' | 'toValue'>;
+export declare type ToastSingleAnimationConfig = ToastSpringAnimationConfig | ToastTimingAnimationConfig;
+export declare type ToastAnimationConfig = ToastSingleAnimationConfig | {
+    enter?: ToastSingleAnimationConfig;
+    exit?: ToastSingleAnimationConfig;
+};
 export declare type ToastOptions = {
     /**
      * Toast type.
@@ -64,9 +75,9 @@ export declare type ToastOptions = {
      */
     avoidKeyboard?: boolean;
     /**
-     * Called when Toast is shown
+     * Called when Toast is shown, receives the show params
      */
-    onShow?: () => void;
+    onShow?: (params: ToastShowParams) => void;
     /**
      * Called when Toast hides
      */
@@ -81,6 +92,15 @@ export declare type ToastOptions = {
      * on the Toast instance) that uses the `props` parameter
      */
     props?: any;
+    /**
+     * Configures the enter/exit animation.
+     *
+     * Pass a single `{ type: 'spring' | 'timing', ...config }` to use the same animation
+     * for both phases, or `{ enter, exit }` to configure them separately.
+     *
+     * Default: `{ type: 'spring', friction: 8 }`
+     */
+    animationConfig?: ToastAnimationConfig;
 };
 export declare type ToastData = {
     text1?: string;
@@ -89,6 +109,7 @@ export declare type ToastData = {
 export declare type ToastShowParams = ToastData & ToastOptions;
 export declare type ToastHideParams = void;
 export declare type BaseToastProps = {
+    testID?: string;
     text1?: string;
     text2?: string;
     onPress?: () => void;
@@ -110,6 +131,7 @@ export declare type ToastConfigParams<Props> = {
     position: ToastPosition;
     type: ToastType;
     isVisible: boolean;
+    visibilityTime: number;
     text1?: string;
     text2?: string;
     text1Style?: StyleProp<TextStyle>;
@@ -187,9 +209,9 @@ export declare type ToastProps = {
      */
     avoidKeyboard?: boolean;
     /**
-     * Called when any Toast is shown
+     * Called when any Toast is shown, receives the show params
      */
-    onShow?: () => void;
+    onShow?: (params: ToastShowParams) => void;
     /**
      * Called when any Toast hides
      */
@@ -198,4 +220,11 @@ export declare type ToastProps = {
      * Called on any Toast press
      */
     onPress?: () => void;
+    /**
+     * Default enter/exit animation configuration applied to every Toast.
+     * Can be overridden per-call via `Toast.show({ animationConfig })`.
+     *
+     * Default: `{ type: 'spring', friction: 8 }`
+     */
+    animationConfig?: ToastAnimationConfig;
 };

package/lib/src/useToast.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useLogger, useGesture } from './contexts';
 import { useTimeout } from './hooks';
+import { DEFAULT_ANIMATION_CONFIG } from './utils/animationConfig';
 import { noop } from './utils/func';
 import { mergeIfDefined } from './utils/obj';
 export const DEFAULT_DATA = {
@@ -22,7 +23,8 @@ export const DEFAULT_OPTIONS = {
     onShow: noop,
     onHide: noop,
     onPress: noop,
-    props: {}
+    props: {},
+    animationConfig: DEFAULT_ANIMATION_CONFIG
 };
 export function useToast({ defaultOptions }) {
     const { log } = useLogger();
@@ -50,7 +52,7 @@ export function useToast({ defaultOptions }) {
     }, [clearTimer, log, options]);
     const show = React.useCallback((params) => {
         log(`Showing with params: ${JSON.stringify(params)}`);
-        const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, text1Style = initialOptions.text1Style, text2Style = initialOptions.text2Style, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, avoidKeyboard = initialOptions.avoidKeyboard, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, props = initialOptions.props } = params;
+        const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, type = initialOptions.type, text1Style = initialOptions.text1Style, text2Style = initialOptions.text2Style, position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, topOffset = initialOptions.topOffset, bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, avoidKeyboard = initialOptions.avoidKeyboard, onShow = initialOptions.onShow, onHide = initialOptions.onHide, onPress = initialOptions.onPress, swipeable = initialOptions.swipeable, props = initialOptions.props, animationConfig = initialOptions.animationConfig } = params;
         setData({
             text1,
             text2
@@ -70,12 +72,13 @@ export function useToast({ defaultOptions }) {
             onHide,
             onPress,
             swipeable,
-            props
+            props,
+            animationConfig
         }));
         // TODO: validate input
         // TODO: use a queue when Toast is already visible
         setIsVisible(true);
-        onShow();
+        onShow(params);
     }, [initialOptions, log]);
     React.useEffect(() => {
         const { autoHide } = options;

package/lib/src/utils/animationConfig.d.ts

@@ -0,0 +1,4 @@
+import { ToastAnimationConfig, ToastSingleAnimationConfig, ToastSpringAnimationConfig } from '../types';
+export declare const DEFAULT_ANIMATION_CONFIG: ToastSpringAnimationConfig;
+export declare type AnimationPhase = 'enter' | 'exit';
+export declare function resolveAnimationConfig(config: ToastAnimationConfig | undefined, phase: AnimationPhase): ToastSingleAnimationConfig;

package/lib/src/utils/animationConfig.js

@@ -0,0 +1,13 @@
+export const DEFAULT_ANIMATION_CONFIG = {
+    type: 'spring',
+    friction: 8
+};
+export function resolveAnimationConfig(config, phase) {
+    if (!config) {
+        return DEFAULT_ANIMATION_CONFIG;
+    }
+    if ('type' in config) {
+        return config;
+    }
+    return config[phase] ?? DEFAULT_ANIMATION_CONFIG;
+}

package/lib/src/utils/test-id.d.ts

@@ -1 +1 @@
-export declare function getTestId(elementName: string): string;
+export declare function getTestId(elementName: string, prefix?: string): string;

package/lib/src/utils/test-id.js

@@ -1,3 +1,3 @@
-export function getTestId(elementName) {
-    return `toast${elementName}`;
+export function getTestId(elementName, prefix = 'toast') {
+    return `${prefix}${elementName}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-toast-message",
-  "version": "2.3.3",
+  "version": "2.5.0",
   "description": "Toast message component for React Native",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -17,13 +17,14 @@
   ],
   "scripts": {
     "prepare": "husky install",
+    "setup": "./scripts/setup.sh",
+    "bump": "./scripts/bump.sh",
     "build": "rm -rf ./lib && tsc",
     "prettier": "./node_modules/.bin/prettier --write",
-    "lint": "./node_modules/.bin/eslint --fix",
-    "lint-staged": "./node_modules/.bin/lint-staged",
+    "lint": "./node_modules/.bin/eslint --fix --cache",
     "test": "./node_modules/.bin/jest",
-    "yalc:push": "yarn build && yalc publish --push",
-    "quality": "yarn lint && tsc --noEmit"
+    "type-check": "tsc --build --incremental",
+    "quality": "yarn type-check && yarn lint && yarn test --coverage"
   },
   "author": "Calin Tamas <calintamas2@gmail.com>",
   "license": "MIT",
@@ -43,8 +44,7 @@
     "prettier": "^2.4.1",
     "prettier-plugin-import-sort": "^0.0.7",
     "react-test-renderer": "^17.0.2",
-    "typescript": "^4.4.3",
-    "yalc": "^1.0.0-pre.53"
+    "typescript": "^4.4.3"
   },
   "peerDependencies": {
     "react": "*",