README
Carousel component
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`