@quartzds/open-core-react NPM

@quartzds/open-core-react

React wrapper for Quartz design system web components.

💿 Installation

npm install @quartzds/open-core-react react react-dom

📖 Usage

Importing Components

Every Quartz core component is available to import as a React component. Note that we're importing the <QdsButton> React component instead of the <qds-button> custom element in the example below:

import { QdsButton } from '@quartzds/open-core-react'

const MyComponent = () => (
  <QdsButton importance="emphasized">Click me</QdsButton>
)

export default MyComponent

Event Handling

Many Quartz core components emit custom events. For example, the input component emits the qdsInput event when it receives input. In React, you can listen to the event using onQdsInput.

Here's how you can bind the input's value to a state variable:

import { useState } from 'react'
import { QdsInput } from '@quartzds/open-core-react'

function MyComponent() {
  const [value, setValue] = useState('')

  return (
    <QdsInput
      value={value}
      onQdsInput={(event) => setValue(event.target.value)}
    />
  )
}

export default MyComponent