@openscreen/ui-kit

🧰 Openscreen React Component Library

This is a React component library built using Rollup, a module bundler for JavaScript. This library includes a set of reusable UI components that can be used in any React application.

---

🛠 Installation

To install the library, you can use npm or yarn:

npm install @openscreen/ui-kit --save

or

yarn add @openscrenn/ui-kit

---

🏗 Usage

To use a component in your application, import it from the library:

import { Button } from '@openscreen/ui-kit';

function App() {
  return (
    <div>
      <Button onClick={() => console.log('Clicked!')}>Click me!</Button>
    </div>
  );
}

🚧 Gotchas

In order to use the QrCodeDesigner component in NextJS, it needs to be imported dynamically. This is because the component uses a library called qr-styling-library which relies on browser APIs. NextJS uses a Node runtime which does not have access to those browser APIs so it will error out. Dynamically importing the component should fix this error and looks like this:

import dynamic from 'next/dynamic'

const QrCodeDesigner = dynamic(() =>
  import('@openscreen/ui-kit')
    .then((lib) => lib.QrCodeDesigner),
      {ssr: false}
    )

---

🧱 Development

Development will continue to be done in the Openscreen private component library.

To export components using this library, add the component to src/index.ts from the libs/components folder in the monorepor.

---

📦 Building

To build the library, you can run the following command:

rushx build

This will create a dist folder with the compiled library.

---

🪪 License

This library is licensed under the Apache-2.0 license