kintone-ui-component

[![npm version][npm-image]][npm-url]

---

kintone UI Component is UI Component for kintone customization.

It supports you to develop kintone customization and kintone plugin.

The document page is here.

English | 日本語

- Installation
- Use with downloading kuc.min.js file
- npm
- CDN

- Usage
- Browser Support
- v0 Usage
- Migration Guide
- Contributing Guideline
- Roadmap
- License

Installation

Kintone UI Component is available as the downloaded kuc.min.js file, a npm package, or a CDN.

$3

Please use kuc.min.js downloaded from releases page.
``
./umd/kuc.min.js
`

$3

Please install and use kintone-ui-component with npm.
`bash
npm install kintone-ui-component
`

> Note: You can also use other package managers:
> `bash
> # pnpm
> pnpm add kintone-ui-component
>
> # yarn
> yarn add kintone-ui-component
> `

$3

Please use these CDN link.

- If you want to specify the version and load it (specify the version number after the project name):
`
https://unpkg.com/kintone-ui-component@1.0.0/umd/kuc.min.js
`

- If you want to load the latest version of kintone UI Component:
`
https://unpkg.com/kintone-ui-component/umd/kuc.min.js
`

> unpkg is not a CDN service provided by Cybozu. It is recommended that you use this for verification.

> In the production environment, you can download the kuc.min.js file from GitHub and use it to avoid any failures and problems related to unpkg.

Usage

`javascript
// UMD
const Kuc = Kucs["1.x.x"];

const text = new Kuc.Text({
value: "this is text!"
});
`

`javascript
// ES modules
import { Text } from "kintone-ui-component/lib/text";

const text = new Text({
value: "this is text!"
});
text.addEventListener("change", event => {
console.log(text value is changed to ${event.detail.value});
});
`

> When using a version on and after v1.4.0, please use Kucs["1.x.x"] instead of Kuc and specify your expected version (ex. new Kucs["1.4.0"].Button()).

> The rendered components' tags and class names will include the version number.

> You may still use Kuc as a global variable but note that it may be conflicting when adding two or more kuc.min.js files on Kintone customization or plug-in. In this case, the Kuc object refers to the last loaded kuc.min.js file.

> In case that there is only one kuc.min.js file in the Kintone system or there is no problem with using last loaded kuc.min.js file, you can use Kuc object. Please remove const Kuc = Kucs['1.x.x']; line.
> When using a version before v1.4.0, please use Kuc as a global variable but note that it may be conflicting when adding two or more kuc.min.js` files on Kintone customization or plug-in.

> Please visit Quick Start and Version conflicts issue and solution for more information!

Browser Support

Chrome	Safari	Firefox	Edge
○	○	○	○

> We confirmed the operation with the latest version of each compatible browser.

v0 Usage

:warning::warning: The maintenance of kintone UI Component v0 ended on 31 December 2023. We recommend migrating to kintone UI Component v1. :warning::warning:

Migration Guide

There are differences in specifications and interfaces between v0 and v1.

Please be sure to verify enough when you updating.

For more details, please refer to the articles below.
- The difference of the way to code between v0 and v1
- v1.0.0 Release Notes

> About the React version provided in v0, we haven't supported it in v1 now.

Contributing Guideline

We welcome contributions to kintone UI Component.

For the details, please check Contributing Guideline.

If you have a question or feature request, please register GitHub issue.

About questions, you can also utilize the following community spaces. These communities are made up of volunteers.

- kintone developer forum (English site)
- cybozu developer community (Japanese site)

And we use Discussions feature of GitHub as our community page dedicated to this tool.

Roadmap

We published our development roadmap.

For more details, please refer to here.

License

MIT LICENSE

[npm-image]: https://img.shields.io/npm/v/kintone-ui-component.svg
[npm-url]: https://npmjs.org/package/kintone-ui-component