# asitis-basecomponents

> Execute one of the following commands in powershell ```shell

Latest version **1.0.11** (published 2017-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install asitis-basecomponents
pnpm add asitis-basecomponents
yarn add asitis-basecomponents
bun add asitis-basecomponents
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2017-10-26 |
| First published | 2017-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Asitis AB |
| Maintainers | fralle |
| Keywords | Asitis, react, component |

## Links

- npm: https://www.npmjs.com/package/asitis-basecomponents
- npm.io page: https://npm.io/package/asitis-basecomponents

## Dependencies (3)

- [react](https://npm.io/package/react.md) 16.0.0
- [react-dom](https://npm.io/package/react-dom.md) 16.0.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) 4.2.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.11 (latest) — 2017-10-26
- 1.0.10 — 2017-10-16
- 1.0.9 — 2017-10-16
- 1.0.8 — 2017-10-11
- 1.0.7 — 2017-10-11
- 1.0.6 — 2017-10-11
- 1.0.5 — 2017-10-06
- 1.0.4 — 2017-10-06
- 1.0.3 — 2017-10-06
- 1.0.2 — 2017-10-06
- 1.0.1 — 2017-10-06

## README

# Asitis React Basecomponents

## Installation
Execute one of the following commands in powershell
```shell

  # Yarn users
  yarn global add asitis-basecomponents

  # NPM users
  npm install --save asitis-basecomponents

```

---

## Usage
To import specific or multiple components from this library use the following:
```javascript
  import { List } from 'asitis-basecomponents'
```

## Components

<details>
  <summary style='font-size: 1.25rem; cursor: pointer;'>List</summary>
Lists array of objects in a table like layout.

#### Props / parameters
| Prop       | Type     | Required | Description                                                 | Default value               |
|:-----------|:--------:|:---------|:------------------------------------------------------------|:----------------------------|
| title      | string           | NO       | Header title of the list with a counter in paranthesis    | |
| columns    | array : object   | YES      | Array with column definitions for formatting, links e.tc. | |
| data       | array : object   | YES      | Array of objects that should be displayed in the list     | |
| link       | object           | NO       | Specify id and baseUri for row link                       | | 
| style      | object           | NO       | Style object to customize component                       | |
| className  | string           | NO       | Adds class to component.. hio hio                         | |

#### Example
```javascript
import React, { Component } from 'react'
import { List } from 'asireact-basecomponents'
import { format } from './formatter'

class Example extends Component {

  render() {
    const linkData = { identifier: 'id', baseUri: '/payments' }
    const paymentColumns = [
      { accessor: 'date', label: 'date', type: 'string', 
        formatter: {
          format, options: { locale: 'sv-SE', dateOnly: true } 
        } 
      },
      { accessor: 'referenceNo', label: 'reference', size: 'large', type: 'string' },
      { accessor: 'amount', label: 'amount', size: 'medium', type: 'number', postfix: 'currency' },
      { accessor: 'paid', label: 'paid', type: 'bool' },
    ]
    const unplacedPayments = [
      { id: '12446534734734734734743773', paymentNo: 'P042312', amount: 1299, currency: 'SEK', date: '2017-10-29', referenceNo: '550320509128581836811', paid: false },
      { id: '66463643634634673788675833', paymentNo: 'P012334', amount: 100500, currency: 'SEK', date: '2017-11-01', referenceNo: '562883868283858236856', paid: true },
      { id: '91209468104782904031896896', paymentNo: 'P623123', amount: 2049, currency: 'SEK', date: '2017-11-02', referenceNo: '382238358258658324868', paid: true },
    ]
    return (
      <List title={'TestList'} columns={paymentColumns} data={unplacedPayments} link={linkData} />
    )
  }
}

export default Example
```
</details>

---
_Source: https://npm.io/package/asitis-basecomponents · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._