How to use cyano-react - 10 common examples

import { _Conditional } from "polythene-core";
import { cast, h, useState, useEffect } from "cyano-react";

import { _Drawer, openDialogsSelector } from "polythene-core-drawer";
import { DialogInstance } from "polythene-react-dialog";
import classes from "polythene-css-classes/drawer";

const DrawerInstance = cast(_Drawer, { h, Dialog: DialogInstance, openDialogsSelector });
DrawerInstance["displayName"] = "DrawerInstance";

const DrawerToggle = cast(_Conditional, { h, useState, useEffect });
DrawerToggle["displayName"] = "DrawerToggle";

export const Drawer = props => (
  h(DrawerToggle, Object.assign(
    {},
    props,
    {
      placeholderClassName: classes.placeholder,
      instance: DrawerInstance,
      permanent: props.permanent || props.mini, // passed to Conditional
    }
  ))
);

SnackbarInstance["displayName"] = "SnackbarInstance";

const options = {
  name:           "snackbar",
  className:      classes.component,
  htmlShowClass:  classes.open,
  defaultId:      "default_snackbar",
  holderSelector: `.${classes.holder}`,
  instance:       SnackbarInstance,
  placeholder:    `span.${classes.placeholder}`,
  queue:          true,
  transitions
};

const MultipleInstance = Multi({ options });
export const Snackbar = cast(MultipleInstance.render, { h, useState, useEffect });
Object.getOwnPropertyNames(MultipleInstance)
  .filter(p => p !== "render")
  .forEach(p => Snackbar[p] = MultipleInstance[p]);
  Snackbar["displayName"] = "Snackbar";

import { Shadow } from "polythene-react-shadow";

export const DialogInstance = cast(_Dialog, { h, a, useState, useEffect, useRef, getRef, useReducer, Shadow, Pane: DialogPane, openDialogsSelector });
DialogInstance["displayName"] = "DialogInstance";

const options = {
  name:           "dialog",
  htmlShowClass:  classes.open,
  defaultId:      "default_dialog",
  holderSelector: `div.${classes.holder}`,
  instance:       DialogInstance,
  placeholder:    `span.${classes.placeholder}`,
};

const MultipleInstance = Multi({ options });
export const Dialog = cast(MultipleInstance.render, { h, useState, useEffect });
Object.getOwnPropertyNames(MultipleInstance)
  .filter(p => p !== "render")
  .forEach(p => Dialog[p] = MultipleInstance[p]);
Dialog["displayName"] = "Dialog";

export const NotificationInstance = cast(_Notification, { h, a, useState, useEffect, useRef, getRef, useReducer });
NotificationInstance["displayName"] = "NotificationInstance";

const options = {
  name:           "notification",
  className:      classes.component,
  htmlShowClass:  classes.open,
  defaultId:      "default_notification",
  holderSelector: `.${classes.holder}`,
  instance:       NotificationInstance,
  placeholder:    `span.${classes.placeholder}`,
  queue:          true,
};

const MultipleInstance = Multi({ options });
export const Notification = cast(MultipleInstance.render, { h, useState, useEffect });
Object.getOwnPropertyNames(MultipleInstance)
  .filter(p => p !== "render")
  .forEach(p => Notification[p] = MultipleInstance[p]);
Notification["displayName"] = "Notification";

import { _Checkbox } from "polythene-core-checkbox";
import { _ViewControl, _SelectionControl } from "polythene-core-selection-control";
import { cast, h, a, useState, useEffect } from "cyano-react";
import { Icon } from "polythene-react-icon";
import { IconButton } from "polythene-react-icon-button";

const ViewControl = cast(_ViewControl, { h, a, Icon, IconButton });
ViewControl["displayName"] = "ViewControl";

const SelectionControl = cast(_SelectionControl, { h, a, useState, useEffect, ViewControl });
SelectionControl["displayName"] = "SelectionControl";

export const Checkbox = cast(_Checkbox, { h, a, SelectionControl });
Checkbox["displayName"] = "Checkbox";

import { _Switch, _ViewControl } from "polythene-core-switch";
import { cast, h, a, useState, useEffect } from "cyano-react";
import { Shadow } from "polythene-react-shadow";
import { IconButton } from "polythene-react-icon-button";
import { _SelectionControl } from "polythene-core-selection-control";

const ViewControl = cast(_ViewControl, { h, a, Shadow, IconButton });
ViewControl["displayName"] = "ViewControl";

const SelectionControl = cast(_SelectionControl, { h, a, useState, useEffect, ViewControl });
SelectionControl["displayName"] = "SelectionControl";

export const Switch = cast(_Switch, { h, a, SelectionControl });
Switch["displayName"] = "Switch";

import { _ScrollButton, _Tab, _Tabs } from "polythene-core-tabs";

import { Button } from "polythene-react-button";
import { Icon } from "polythene-react-icon";
import { IconButton } from "polythene-react-icon-button";

import { cast, h, a, getRef, useState, useEffect } from "cyano-react";

const ScrollButton = cast(_ScrollButton, { h, a, IconButton });
const Tab = cast(_Tab, { h, a, Button, Icon });
export const Tabs = cast(_Tabs, { h, a, getRef, useState, useEffect, ScrollButton, Tab });

Tabs["displayName"] = "Tabs";

import { _ToolbarTitle } from "polythene-core-toolbar";
import { cast, h, a } from "cyano-react";

export const ToolbarTitle = cast(_ToolbarTitle, { h, a });

import { _Ripple } from "polythene-core-ripple";
import { cast, h, a, getRef, useRef, useState, useEffect } from "cyano-react";

export const Ripple = cast(_Ripple, { h, a, getRef, useRef, useState, useEffect });

import { _FAB } from "polythene-core-fab";
import { Icon } from "polythene-react-icon";
import { Button } from "polythene-react-button";
import { cast, h, a } from "cyano-react";

export const FAB = cast(_FAB, { h, a, Button, Icon });