https://github.com/nexys-system/react-headless

React headless components
https://github.com/nexys-system/react-headless

data-table list nexys react react-components reactjs typescript ui-independent

Last synced: about 2 months ago
JSON representation

React headless components

• Host: GitHub
• URL: https://github.com/nexys-system/react-headless
• Owner: nexys-system
• License: agpl-3.0
• Created: 2021-05-25T18:59:19.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-08-23T14:01:41.000Z (9 months ago)
• Last Synced: 2025-04-07T06:46:09.092Z (about 2 months ago)
• Topics: data-table, list, nexys, react, react-components, reactjs, typescript, ui-independent
• Language: TypeScript
• Homepage: https://nexys-system.github.io/react-headless
• Size: 2.5 MB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Headless components for React

[![npm version](https://img.shields.io/npm/v/@nexys/headless)](https://www.npmjs.com/package/@nexys/headless)

[![Publish](https://github.com/nexys-system/react-headless/actions/workflows/publish.yml/badge.svg)](https://github.com/nexys-system/react-headless/actions/workflows/publish.yml)

[![Deployment](https://github.com/nexys-system/react-headless/actions/workflows/deploy.yml/badge.svg)](https://github.com/nexys-system/react-headless/actions/workflows/deploy.yml)

React headless components - Quickly build robust react apps

- no UI dependencies

- Minimal bootstrap implementation

- Typescript, all props typed

## Get started

`yarn add @nexys/headless`

## UI Components

All components fitting [`ui-type.ts`](https://github.com/nexys-system/react-headless/blob/master/src/lib/list/ui-type.ts) must be created for a particular design system.

Then instantiate [`list-super`](https://github.com/nexys-system/react-headless/blob/master/src/lib/list/list-super.tsx) with the created UI components

see example [here](https://github.com/nexys-system/react-headless/commit/6e7df1eadab7ca14b99118a6a27dbb34c4eb859f#diff-25a6634263c1b1f6fc4697a04e2b9904ea4b042a89af59dc93ec1f5d44848a26)

## Requests

Create a request function that extends https://github.com/nexys-system/react-headless/blob/master/src/lib/request/fetch.ts#L4

below an untested implementation example:

```

const request = (

  url: string,

  method:Method = "GET",

  data?: B

): Promise => {

  try {

    return fetchJSON(url, {method, data});

  } catch (err) {

    if(err.message) {

      throw Error(err)

    }

    const {status, data}:{status:number, data?:any} = err;

    

    if (status === 401) {

      // user unauthenticated, redirect to login?

    }

    

    if (status === 403) {

      // not enough permissions, display toast

    }

    

    if (status === 500) {

      // todo

    }

    

    if (status === 400) {

      return Promise.reject(data)

    }

  }

}

```


## Associated Resources

- [React I18n](https://github.com/nexys-system/react-i18n)

## Old versions

- [Material list](https://nexys-system.github.io/mui-list-ts/)

- [React Material Components](https://github.com/nexys-system/react-material-component)

- [React bootstrap](https://github.com/nexys-system/react-bootstrap-components)

- [Tailwind React UI](https://github.com/nexys-system/tailwind-react-ui)

- [React Stateful](https://github.com/nexys-system/react-stateful)