react-modal

Install

yarn add @nju33/react-modal
# npm i @nju33/react-modal

By the way, pkg.types that d.ts files, is included in for the TypeScript.

VDom herarchy

<Modal ...>
  <Cover ...>
    <CloseIcon ... />
    <Box ...>
      <!-- this.props.children -->
    </Box>
  </Cover>
</Modal>

Interfaces

export type ModalTransitionType = 'simple' | 'slide' | 'slideFromOutside';

export interface ModalProps {
  // Any of the above, `ModalTransitionType`
  type?: ModalTransitionType;
  // Will be called on run the `close event` from somewhere
  // For example, Such when `<Cover/>` clicked, <`CloseIcon/>` clicked
  handleClose(): void;

  // It's used like that in `react-transition-group/Transition`
  // Please read https://reactcommunity.org/react-transition-group/#Transition
  // for more imformation
  in?: boolean;
  timeout?: number;

  // If they're, Each style of component extends in them
  styles?: {
    cover?: string;
    closeIcon?: string;
    box?: string;
  };
}

Example

// ... head of React

render() {
  return (
    <div>
      <Modal
        in={this.state.in}
        handleClose={() => this.setState({in: false})}
      >
        <div>{/* somehow */}</div>
      </Modal>
    </div>
  );

// ...