# stackby-ui-component

> Made with create-react-library

Latest version **1.0.5** (published 2021-05-17) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install stackby-ui-component
pnpm add stackby-ui-component
yarn add stackby-ui-component
bun add stackby-ui-component
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-05-17 |
| First published | 2021-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 10.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Stackbydev |
| Maintainers | stackbyhq |

## Links

- npm: https://www.npmjs.com/package/stackby-ui-component
- Repository: https://github.com/Stackbydev/stackby-ui-component
- Homepage: https://github.com/Stackbydev/stackby-ui-component#readme
- Issues: https://github.com/Stackbydev/stackby-ui-component/issues
- npm.io page: https://npm.io/package/stackby-ui-component

## Dependencies (2)

- [node-sass](https://npm.io/package/node-sass.md) ^6.0.0
- [stackby-ui-component](https://npm.io/package/stackby-ui-component.md) ^1.0.5

## Recent versions

- 1.0.5 (latest) — 2021-05-17
- 1.0.4 — 2021-05-16
- 1.0.3 — 2021-05-13
- 1.0.2 — 2021-05-12
- 1.0.1 — 2021-05-10
- 1.0.0 — 2021-05-10

## README

# stackby-ui-component

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/stackby-ui-component.svg)](https://www.npmjs.com/package/stackby-ui-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Features

* configurable via props
* Controllable state props and modular architecture
* Flexible approach to data, with customisable functions
* auto position
* small bundle size

## Installation and usage

```bash
npm install --save stackby-ui-component
```

## Select Usage

```jsx
import React from 'react';
import { Select } from 'stackby-ui-component';
import 'stackby-ui-component/dist/index.css'

const options = [
    { label: "chocolate", value: 'chocolate', id: 1, color: "#000000" },
    { label: "strawberry", value: 'strawberry', id: 2, color: "#FFEB3B" },
    { label: "vanilla", value: 'vanilla', id: 3, color: "#FD823E" },
    { label: "Banana", value: 'Banana', id: 4, color: "#8BC34A" },
    { label: "Mango", value: 'Mango', id: 5, color: "#FFEB3B" },
];

const collaboratorOptions = [
    { label: "chocolate", value: 'chocolate', id: 1, image: "" },
    { label: "strawberry", value: 'strawberry', id: 2, image: "" },
    { label: "vanilla", value: 'vanilla', id: 3, image: "" },
    { label: "Banana", value: 'Banana', id: 4, image: "" },
    { label: "Mango", value: 'Mango', id: 5, image: "" },
];

class App extends React.Component {
  state = {
    selectedOption: [],
    // selectOption:  [{ label: "chocolate", value: 'chocolate', id: 1, color: "#000000" }]
    // selectCollaborator:  [{ label: "chocolate", value: 'chocolate', id: 1, image: "" }]
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };

  render() {
    const { selectedOption } = this.state;

    return (
      <div>
         // select
        <Select
          value={selectOption}
          onChange={this.handleChange}
          option={options}
          type ='select'
          className= {'myClass'}
         />

         // Multi Select
        <Select
          value={selectOption}
          onChange={this.handleChange}
          option={options}
          type ='multiSelect'
         />

         // collaborator
        <Select
          value={selectCollaborator}
          onChange={this.handleChange}
          option={collaboratorOptions}
          type ='collaborator'
         />

         // Multi Collaborator
        <Select
          value={selectCollaborator}
          onChange={this.handleChange}
          option={collaboratorOptions}
          type ='multiCollaborator'
         />
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* option - specify the options the user can select from
* value - control the current value
* type - select, multiSelect, collaborator, multiCollaborator
* className - add customer class

## Rating Usage

```jsx
import React from 'react';
import { Rating } from 'stackby-ui-component';
import 'stackby-ui-component/dist/index.css'

class App extends React.Component {
  state = {
    defaultValue: 2,
  };

  handleChange = ratingValue => {
    console.log(`Collaborator selected:`, ratingValue);
  };

  render() {
    const { defaultValue } = this.state;

    return (
      <div>
         <Rating value={defaultValue}
              stop={5} 
              onChange={this.handleChange} 
              className = {'myClassName'} >
         </Rating>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* value - control the current value
* className - add customer class

## Checkbox Usage

```jsx
import React from 'react';
import { Checkbox } from 'stackby-ui-component';
import 'stackby-ui-component/dist/index.css'

class App extends React.Component {
  state = {
    defaultValue: true,
  };

  handleChange = checkboxValue => {
    console.log(`checkbox selected:`, checkboxValue);
  };

  render() {
    const { defaultValue } = this.state;

    return (
      <div>
         <Checkbox checked={defaultValue} 
             onChange={this.handleChange} 
             className={'myClassName'}>
         </Checkbox>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* checked -  control the value is checked or not 
* className - add customer class

## DatePicker Usage

```jsx
import React from 'react';
import { DatePicker } from 'stackby-ui-component';
import 'stackby-ui-component/dist/index.css'

class App extends React.Component {
  state = {
    defaultValue: '25/10/2021',
  };

  handleChangeDatePicker = Value => {
    console.log(`DatePicker time stamp `, Value);
    console.log("DatePicker date object", new Date(data));
  };

  render() {
    const { defaultValue } = this.state;
    return (
      <div>
         <DatePicker value={defaultValue} 
              onChange={handleChangeDatePicker}
              className = {'myClassName'}>
         </DatePicker>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* value - control the current value
* className - add customer class

## LongText Usage

```jsx
import React from 'react';
import { LongText } from 'stackby-ui-component';
import 'stackby-ui-component/dist/index.css'

class App extends React.Component {
  state = {
    defaultValue: '',
  };

  handleChange = Value => {
    console.log(`LongText `, Value);
  };

  render() {
    const { defaultValue } = this.state;

    return (
      <div>
         <LongText value={defaultValue} isMarkDown={true} 
             onChange={this.handleChange} 
             textareaHeight={100}
             modalHeight={100}
             isModel={true}
             modalWidth={300}>
         </LongText>
      </div>
    );
  }
}
```
## Props

Common props you may want to specify include:

* onChange - subscribe to change events
* value - control the current value
* isMarkDown: boolean - enable markdown for true
* isModel: boolean - open with model popup.

## License

MIT © [Stackbydev](https://github.com/stackbyhq/ui)

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