https://github.com/ericadamski/react-contextual-dialog

A simple set of dialog components that utilize react 16 context api
https://github.com/ericadamski/react-contextual-dialog

dialog dialog-component react react-16 react-context

Last synced: 27 days ago
JSON representation

A simple set of dialog components that utilize react 16 context api

• Host: GitHub
• URL: https://github.com/ericadamski/react-contextual-dialog
• Owner: ericadamski
• Created: 2018-04-23T19:45:34.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-24T14:27:12.000Z (about 8 years ago)
• Last Synced: 2024-04-26T01:06:15.309Z (about 2 years ago)
• Topics: dialog, dialog-component, react, react-16, react-context
• Language: JavaScript
• Homepage: https://ericadamski.github.io/react-contextual-dialog/
• Size: 844 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Contextual Dialog

A simple set of dialog components that utilize React 16 context API

## Installation

`yarn add react-contextual-dialog` or `npm i react-contextual-dialog`

## Usage

[![Edit Example of react-contextual-dialog](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/n3omjooyzm)

Render a single `DialogContainer` heigher than you want to render the dialogs.

```javascript

import React from 'react';

import { render } from 'react-dom';

import ContextualDialog from 'react-contextual-dialog';

const Main = ({ children }) => (

  

    {children}

  

);

render(, document.getElementById('app'));

```

You can now render a dialog anywhere in the `children` passed to ``

```javascript

import React, { Fragment } from 'react';

import { render } from 'react-dom';

import ContextualDialog from 'react-contextual-dialog';

const Dialog = ({ open, close, isOpen }) => (

  

    {!isOpen && Open the dialog}

    {isOpen && (

      


        I am a dialog

        Close Me

      

    )}

  

);


const Popup = () => (

  

    

  

);

const Main = ({ children }) => (

  

    {children}

  

);

render(

  

    

  ,

  document.getElementById('app')

);

```