@adactive/arc-screensaver

Carousel component

Example with adsum-carousel

Example with image

Example with random content

Example with changed modal timer

Getting started

This are the things, which can be imported from the screenSaver:

export type { ScreenSaverReducersStateType, ScreenSaverReducersType } from './src/ScreenSaverReducers';
export type { PropsType as ModalWrapperPropsType } from './src/subComponents/ModalWrapper';
export {
    screenSaverActions,
    screenSaverReducers,
    ScreenSaverSagas,
    ModalWrapper
};
export default ScreenSaver;

So, screensaver component have several dependencies:

1) redux
2) redux-saga

So, you should add a screenSaverReducer to combinedReducers and ScreenSaverSagas to the rootSaga.

    npm i --save @adactive/arc-screensaver

OR

    yarn add @adactive/arc-screensaver

    import ScreenSaver, { screenSaverActions, ModalWrapper } from '@adactive/arc-screensaver';
     ...
    
    const ModalComponent = ({ modalTimer, closeModal, isHere }: ModalPropsType): Node => (
        <div>Hello, world! { modalTimer }</div>
    );
    
    const WrapperModal = ModalWrapper(ModalComponent);
    
    <ScreenSaver
        modalComponent={<WrapperModal />}
    >
        <img src="http://via.placeholder.com/1280x700" />
    </ScreenSaver>

Props

inactivityTimer - time in ms, which should pass without any clicks inside the app for modal to appear

initialModalCounter - the counter in seconds, which will be passed to your modal component if it is wrapped with ModalWrapper

overlayClassName - a classname, which will be added to the screensaver component

onOverlayClicked - a custom function, which will be called, when user clicks on the screenSaver's overlay

modalComponent - any component you like, which can be wrapped with ModalWrapper and thus, be passed 3 props: modalTimer, closeModal, isHere. closeModal and isHere are currently duplicates of each other, but this will be changed at some point of time in the future. Call closeModal or isHere, if you want to close the screensaver. Not providing the modal prop will result in skipping modal step and the user will be taken to the actual screensaver content

children - any content, which you want to display in the middle of the screen.

type OwnPropsType = {|
    inactivityTimer: number,
    initialModalCounter: number,
    overlayClassName?: string,
    onOverlayClicked?: () => void,
    modalComponent: ComponentType<ModalWrapperPropsType>,
    children: Element<any>
|};

static defaultProps = {
    initialModalCounter: 10,
    inactivityTimer: 10000
};

type ModalWrapperPropsType = {
    modalTimer: number,
    closeModal: () => void,
    isHere: () => void
}

Copy component inside your project src folder

Less only

`npx @adactive/arc-screensaver copy --less-only`

Full copy

`npx @adactive/arc-screensaver copy`