danger-ui

Danger UI React Components

Example

https://apodacaduron.github.io/danger-ui/

Install

npm install --save danger-ui

Components

• Button
• Input
• Avatar
• Spinner
• Table
• Badge
• Select
• Alert
• Modal
• FormGroup

Usage

import React from 'react'

import { MyComponent } from 'danger-ui'
import 'danger-ui/dist/index.css'

const Example = () => {
  return <MyComponent />
}

Button

Props

| Property | Type | Values | Description | Default | | ---------- | ---------- | ------------------------------------------------ | ------------------------------------------ | --------- | | disabled | boolean | true false | Button can be disabled when true | false | | design | string | regular light round transparent border | Different styles for single component | regular | | radius | number | 0 - 50 | Border radius | 10 | | loading | boolean | true false | Disables button and show loading when true | false | | onClick | function | | Triggers function passed | | | block | boolean | true false | Makes width 100% | false |

Input

Props

| Property | Type | Values | Description | Default | | ------------- | --------------------------- | ----------------------- | ---------------------------------------------------- | ------- | | disabled | boolean | true false | Button can be disabled when true | false | | design | string | line solid border | Different styles for single component | solid | | radius | number | 0 - 50 | Border radius | 10 | | animated | boolean | true false | Animates label on focus if true | false | | placeholder | string | | Sets a placeholder text, if animated becomes a label | | | value | string``boolean``number | | Sets input value | | | onChange | function | | | | | onFocus | function | | | | | onBlur | function | | | | | danger | boolean | true``false | Turns de input red | false | | dangerText | string | | Adds text under input | | | block | boolean | true``false | Sets the input to full width | false |

Avatar

Props

| Property | Type | Values | Description | Default | | --------------- | ------------- | -------------- | -------------------------------------------------------------- | ------------ | | size | number | | Changes dimensions of element | 40 | | radius | number | 0 - 50 | Border radius | 10 | | src | string | true false | URL to show avatar | false | | defaultAvatar | string | | URL from a default image | Gravatar url | | alt | string | | Adds alt to img element | | | color | string | | Can take a color code, or use primary color from css variables | primary | | ~~border~~ | ~~boolean~~ | | ~~Not implemented yet~~ | | | text | string | | If theres no src added it will show 2 characters | |

Spinner

Props

| Property | Type | Values | Description | Default | | -------- | -------- | ------ | ----------------------------- | ------- | | size | number | | Changes dimensions of element | 20 | | width | number | | Changes dimensions of element | 1 |

Table

Props

| Property | Type | Values | Description | Default | | --------- | ------- | ------ | ---------------------------------------- | ------- | | columns | array | [] | Maps array and prints it on table header | | | body | | jsx | Pass rows for table | |

Badge

Props

| Property | Type | Values | Description | Default | | -------- | ---- | ------ | ---------------- | ------- | | text | | | Pass jsx or text | |

Select

Props

| Property | Type | Values | Description | Default | | ------------- | --------------------------- | ---------------------------- | -------------------------------------------------------------- | ------- | | disabled | boolean | true false | Button can be disabled when true | false | | design | string | line solid border | Different styles for single component | solid | | radius | number | 0 - 50 | Border radius | 10 | | animated | boolean | true false | Animates label on focus if true | false | | placeholder | string | | Sets a placeholder text, if animated becomes a label | | | value | string``boolean``number | | Sets select value | | | data | array | [{ option: 'Foo', value: 1}] | Takes an array of objects with properties option and value | | | onChange | function | | | | | onFocus | function | | | | | onBlur | function | | | | | danger | boolean | true``false | Turns de input red | false | | dangerText | string | | Adds text under input | | | block | boolean | true``false | Sets the input to full width | false |

Alert

Props

| Property | Type | Values | Description | Default | | ---------- | ---------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------- | ------------ | | children | jsx | | Takes in any jsx element | | | color | string | | If not set will use primary color, or use any color format | primary | | position | string | top-left``top-center``top-right``bottom-left``bottom-center``bottom-right | Changes position of alert on the screen | top-center | | visible | boolean | true``false | Displays the alert | false | | onClick | function | | Execute passed function | |

Modal

Props

| Property | Type | Values | Description | Default | | ------------ | ---------- | --------------- | ---------------------------------------------------------- | ------- | | visible | boolean | true``false | Displays the modal component | false | | header | jsx | | Displays on top of modal component | | | footer | jsx | | Displays in bottom of modal component | | | children | jsx | | Display on the center of modal component | | | onClickOut | function | | Executes function when click background of modal component | |

FormGroup

Props

| Property | Type | Values | Description | Default | | ---------- | ----- | ------ | ------------------------ | ------- | | children | jsx | | Takes in any jsx element | |

License

MIT © apodacaduron