How to use cyano-react - 10 common examples

To help you get started, we’ve selected a few cyano-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ArthurClemens / polythene / packages / polythene-react-drawer / src / index.js View on Github external
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
    }
  ))
);
github ArthurClemens / polythene / packages / polythene-react-snackbar / src / index.js View on Github external
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";
github ArthurClemens / polythene / packages / polythene-react-dialog / src / index.js View on Github external
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";
github ArthurClemens / polythene / packages / polythene-react-notification / src / index.js View on Github external
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";
github ArthurClemens / polythene / packages / polythene-react-checkbox / src / index.js View on Github external
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";
github ArthurClemens / polythene / packages / polythene-react-switch / src / index.js View on Github external
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";
github ArthurClemens / polythene / packages / polythene-react-tabs / src / index.js View on Github external
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";
github ArthurClemens / polythene / packages / polythene-react-toolbar / src / toolbar-title.js View on Github external
import { _ToolbarTitle } from "polythene-core-toolbar";
import { cast, h, a } from "cyano-react";

export const ToolbarTitle = cast(_ToolbarTitle, { h, a });
github ArthurClemens / polythene / packages / polythene-react-ripple / src / index.js View on Github external
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 });
github ArthurClemens / polythene / packages / polythene-react-fab / src / index.js View on Github external
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 });

cyano-react

Takes a base component and returns a React component

MIT
Latest version published 2 years ago

Package Health Score

40 / 100
Full package analysis

Popular cyano-react functions

Similar packages