react-cyclonedx

A React component library for displaying CycloneDX-formatted SBOMs.

Overview

This library provides composable components that let you build custom views for your CycloneDX data.

Combine together the provided react components or create your own to display exactly the information you need from your SBOM.

Installation

npm install @mind-oss/react-cyclonedx

Quick Start

Build a simple component detail view using provided entries:

import { ComponentDetail, ComponentEntryName, ComponentEntryDescription } from '@mind-oss/react-cyclonedx'

function () {
  return (
    <ComponentDetail component={data}>
      <ComponentEntryName />
      <ComponentEntryDescription />
    </ComponentDetail>
  )
}

The same principle applies to create component overviews:

import { ComponentDetail, ComponentEntryName, ComponentEntryDescription } from '@mind-oss/react-cyclonedx'

function () {
  return (
    <ComponentsTable components={data}>
      <ComponentEntryName />
      <ComponentEntryDescription />
    </ComponentsTable>
  )
}

Custom Entries

Create custom table entries to display domain-specific data:

import { ComponentDetail, ComponentEntryName, TableEntry } from '@mind-oss/react-cyclonedx'

export function CustomEntry() {
  return (
    <TableEntry label={'Custom Tag'} sortable={(row: Component) => row.properties.find(x => x.name === 'custom')} size={0.4}>
      {(row: Component) => (row.properties.find(x => x.name === 'custome')}
    </TableEntry>
  )
}

function () {
  return (
    <ComponetnDetail component={data}>
      <ComponentEntryName />
      <CustomEntry />
    </ComponentDetail>
  )
}

Development

Running this library in dev mode require using node version 20. If your system provide an older version of node, use nvm.

Use the following commands to set your node version to the latest LTS.

nvm install lts/jod
nvm use lts/jod
nvm alias default lts/jod

Install the dependencies and run the storybook dev server with:

npm install
npm run storybook