universe:ui-react

v0.2.2Published 8 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

universe:ui-react

Available plain components

  • Actions
  • Button
  • Column
  • Container
  • Content
  • Divider
  • Grid
  • Header
  • Icon
  • Message

Available components

  • Modal
  • Modals
  • Toasts

Modals

Creating modal

1import {Actions, Button, Content, Icon, Modal, Modals} from 'meteor/universe:ui-react';
2
3const ExampleModal = React.createClass({
4    displayName: 'ExampleModal',
5
6    render () {
7        const props = {
8            visible: this.props.visible,
9            modal: {
10                onHide: this.props.modal.onHide,
11                selector: {
12                    close: '.actions .close'
13                }
14            }
15        };
16
17        return (
18            <Modal className="small basic" {...props}>
19                <Content>
20                    <p>Example content</p>
21                </Content>
22
23                <Actions>
24                    <Button className="basic inverted close">
25                        <Icon icon="icon"/>
26                        Close
27                    </Button>
28                </Actions>
29            </Modal>
30        );
31    }
32});
33
34Modals.register({
35    name: 'example',
36    component: ExampleModal
37});

Managing modals

1import {Modals} from 'meteor/universe:ui-react';
2
3// Somewhere in layout
4<Modals />
5
6// Then
7Modals.hide('example');
8Modals.show('example', extraProps);

Predefined modals

AskModal
1Modals.show('ask', {
2    icon: 'help',
3    message: 'Are You sure?',
4
5    no: 'No',
6    noIcon: 'remove',
7    noAction: () => console.log('no action'),
8
9    yes: 'Yes',
10    yesIcon: 'checkmark',
11    yesAction: () => console.log('yes action')
12});

Toasts

1import {Toasts} from 'meteor/universe:ui-react';
2
3// Somewhere in layout
4<Toasts />
5
6// Then
7const modalId = Toasts.create({
8    className,
9    message,
10    header,
11    icon,
12    type,   // default: 'info'
13    timeout // default: 2500 - auto remove toast
14});
15
16Toasts.remove(modalId);