1
$ npx create-react-app ui
2
$ cd ui
3
$ npm install onsenui react-onsenui --save # Onsen UI 설치
4
$ npm start

1
import './App.css'
2
// Webpack CSS import, 밑에 2줄 import해야 쓸 수 있음
3
import 'onsenui/css/onsenui.css'
4
import 'onsenui/css/onsen-css-components.css'
5
import OnesenUIExample from './components/OnsenUI/OnesenUIExample'
6

7
export default function App() {
8
  return (
9
    <div className="App">
10
      <OnesenUIExample />
11
    </div>
12
  )
13
}

1
// src/components/OnsenUI/OnsenUIExample.jsx
2
import ButtonExample from './ButtonExample'
3
import { Page } from 'react-onsenui'
4

5
export default function OnesenUIExample() {
6
  return (
7
    <Page>
8
      <ButtonExample />
9
    </Page>
10
  )
11
}

1
// src/components/OnsenUI/ButtonExample.jsx
2
import { Button } from 'react-onsenui'
3

4
export default function ButtonExample() {
5
  const hnadleClick = () => {
6
    alert('눌렀음!')
7
  }
8
  return (
9
    <>
10
      <Button onClick={hnadleClick} modifier="large--cta">
11
        Tap Me
12
      </Button>
13

14
      <Button onClick={hnadleClick} disabled={true}>
15
        disabled
16
      </Button>
17

18
      <Button onClick={hnadleClick} modifier="outline">
19
        outline
20
      </Button>
21

22
      <Button onClick={hnadleClick} modifier="light">
23
        light
24
      </Button>
25

26
      <Button onClick={hnadleClick} modifier="quiet">
27
        quiet
28
      </Button>
29

30
      <Button onClick={hnadleClick} modifier="cta">
31
        cta
32
      </Button>
33

34
      <Button onClick={hnadleClick} modifier="large-quiet">
35
        large-quiet
36
      </Button>
37

38
      <Button onClick={hnadleClick} modifier="material">
39
        material
40
      </Button>
41

42
      <Button onClick={hnadleClick} modifier="material-flat">
43
        material-flat
44
      </Button>
45
    </>
46
  )
47
}

1
// src/components/OnsenUI/ActionSheetExample.jsx
2
import { useState } from 'react'
3
import { ActionSheetButton, ActionSheet, Button } from 'react-onsenui'
4

5
export default function ActionSheetExample() {
6
  const [open, setOpen] = useState(false)
7
  const handleClick = () => {
8
    setOpen(true)
9
  }
10
  return (
11
    <div>
12
      <Button onClick={handleClick}>Action Sheet 열기</Button>
13
      <ActionSheet isOpen={open} title="action sheet">
14
        <ActionSheetButton>Label 1</ActionSheetButton>
15
        <ActionSheetButton>Label 2</ActionSheetButton>
16
        <ActionSheetButton>Label 4</ActionSheetButton>
17
        <ActionSheetButton modifier="destructive">Cancel</ActionSheetButton>
18
        <ActionSheetButton>Save</ActionSheetButton>
19
      </ActionSheet>
20
    </div>
21
  )
22
}

1
// src/components/OnsenUI/OnsenUIExample.jsx
2
import ButtonExample from './ButtonExample'
3
import { Page } from 'react-onsenui'
4
import ActionSheetExample from './ActionSheetExample'
5

6
export default function OnesenUIExample() {
7
  return (
8
    <Page>
9
      <ActionSheetExample />
10
      <ButtonExample />
11
    </Page>
12
  )
13
}

1
import React from 'react'
2
import { Checkbox, List, ListItem } from 'react-onsenui'
3

4
export default function CheckBoxExample() {
5
  return (
6
    <List>
7
      <ListItem tappable>
8
        <label class="left">
9
          <Checkbox input-id="check-1"></Checkbox>
10
        </label>
11
        <label for="check-1" class="center">
12
          Apple
13
        </label>
14
      </ListItem>
15
      <ListItem tappable>
16
        <label class="left">
17
          <Checkbox input-id="check-2" checked></Checkbox>
18
        </label>
19
        <label for="check-2" class="center">
20
          Banana
21
        </label>
22
      </ListItem>
23
    </List>
24
  )
25
}

1
// src/components/OnsenUI/OnsenUIExample.jsx
2
import ButtonExample from './ButtonExample'
3
import { Page } from 'react-onsenui'
4
import ActionSheetExample from './ActionSheetExample'
5
import CheckBoxExample from './CheckBoxExample'
6

7
export default function OnesenUIExample() {
8
  return (
9
    <Page>
10
      <CheckBoxExample />
11
      <ActionSheetExample />
12
      <ButtonExample />
13
    </Page>
14
  )
15
}

1
import React from 'react'
2
import { Fab, Icon } from 'react-onsenui'
3

4
export default function FabExample() {
5
  return (
6
    <div>
7
      <Fab position="bottom right">
8
        <Icon icon="fa-space-shuttle"></Icon>
9
      </Fab>
10
    </div>
11
  )
12
}