React mobile modals

Made with create-react-library

Use with webview for creation pretty navigation 📱

Install

npm install --save react-mobile-modals

or

yarn add react-mobile-modals

Usage

import React from 'react'

import { ModalsProvider, useModals } from 'react-mobile-modals'
import 'react-mobile-modals/dist/index.css'

const SecondPage = () => {
  const { closeModal } = useModals();

  return (
    <div className="page">
      <button onClick={closeModal}>
        Back
      </button>
    </div>  
  )
}

const FirstPage = () => {
  const { openModal } = useModals();

  const openSecondPage = () => openModal({ component: <SecondPage />, direction: "vertical" });

  return (
    <div className="page">
      <button onClick={openSecondPage}>
        Open second page
      </button>
    </div>  
  )
}


const MainWindow = () => {
  const { openModal } = useModals();

  const openFirstPage = () => openModal({ component: <FirstPage /> });

  return (
    <div className="page main">
      <button onClick={openFirstPage}>
        Open first page
      </button>
    </div>
  )
}

const App = () => {
  render() {
    return (
      <ModalsProvider>
        <MainWindow />
      </ModalsProvider>
    )
  }
}

openModal(modalProps)

modalProps

• component: ReactNode;
• direction: horizontal(default), vertical;

Example https://skilldill.github.io/react-mobile-modals/

License

MIT ©