antik-code-challenge v1.3.0

antik code challenge - react package

]github-license-url

Installation:

npm i antik-code-challenge

or

yarn add antik-code-challenge

Usage :

Add 'AntikCodeChallenge' to your component:

import { AntikCodeChallenge } from 'antik-code-challenge';

<>
  <AntikCodeChallenge
    productId={'123456'}
    price={45.99}
    currency={'€'}
    title={'Example title'}
    description={'Example description'}
    image={'https://placebear.com/g/200/200'}
    imageAlt='Example image alt'
  />
</>

Models :

interface AntikCodeChallengeProps {
    productId: string;
    price: number;
    currency: string;
    title?: string;
    description?: string;
    image?: string;
    imageAlt?: string;
    defaultButtonProps?: ButtonProps;
    modalProps?: ModalProps;
    customButton?: ReactNode;
}

Rich variety of possible customization: property "defaultButtonProps" gives possibility to customize button which initializes AntikCodeChallenge modal, if someone would like to use own initializing button, then "defaultButtonProps" property should persist undefined and "customButton" should be provided with desired button

interface ButtonProps {
    label: string;
    id?: string;
    type?: 'button' | 'submit' | 'reset';
    disabled?: boolean;
    fontSize?: string;
    margin?: string;
    padding?: string;
    backgroundColor?: string;
    borderRadius?: string;
    lineHeight?: string;
    textColor?: string;
    fontFamily?: string;
    fontWeight?: string;
    boxShadow?: string;
    border?: string;
    backgroundOnHover?: string;
    display?: string;
    position?: string;
    top?: string;
    left?: string;
    bottom?: string;
    right?: string;
    justifyContent?: string;
    width?: string;
}

There is also possibility to customize AntikCodeChallenge modal, by providing desired styles to "modalProps" property

interface ModalProps {
  position?: string;
  top?: string;
  left?: string;
  bottom?: string;
  right?: string;
  display?: string;
  width?: string;
  minHeight?: string;
  backgroundColor?: string;
  animation?: string | boolean;
  padding?: string;
  withCloseIcon?: boolean;
  justifyContent?: string;
  flexDirection?: string;
  alignItems?: string;
  textAlign?: string;
}