Skip to content

v18.2.0

tagged this 25 Apr 15:08
Given a view `Modal.view`:
```
Modal Vertical
  backgroundColor rgba(0,0,0,0.25)
  bottom 0
  isModal true
  isOpen <
  left 0
  position fixed
  right 0
  top 0
  zIndex 1
  ModalContent Vertical
    backgroundColor white
    Text
      text Hey I'm inside the modal
    Horizontal
      onClick <close
      Text
        text close
```

With a logic `UseModal.view.logic.js` file like:
```
import React, { useState } from 'react';
import UseModalView from './UseModal.view.js';

let useModal = (startsVisible = false) => {
  let [isShowing, setIsShowing] = useState(startsVisible);

  return {
    isShowing,
    close: () => setIsShowing(false),
    open: () => setIsShowing(true),
  };
};

let UseModalLogic = props => {
  let modal = useModal();

  return <UseModalView {...props} {...modal} />;
};

export default UseModalLogic;
```

You'd use it like `UseModal.view`:
```
UseModal Vertical
  Horizontal
    onClick <open
    Text
      text OPEN

  Modal
    close <
    isOpen <isShowing
```
Assets 2