https://github.com/jiyuujin/nekohack-ui

:atom: A React UI components for Web
https://github.com/jiyuujin/nekohack-ui

react react-dom styled-components typescript ui-components

Last synced: 20 days ago
JSON representation

:atom: A React UI components for Web

• Host: GitHub
• URL: https://github.com/jiyuujin/nekohack-ui
• Owner: jiyuujin
• Created: 2020-07-20T05:44:51.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-29T04:21:52.000Z (almost 2 years ago)
• Last Synced: 2024-12-01T11:44:01.532Z (about 1 month ago)
• Topics: react, react-dom, styled-components, typescript, ui-components
• Language: TypeScript
• Homepage: https://npm.im/nekohack-ui
• Size: 480 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# nekohack-ui



  

    

  

  

    

  

  

    

  



## Installation

Install [nekohack-ui](https://www.npmjs.com/package/nekohack-ui) package.

```bash

npm i nekohack-ui

npm i react react-dom styled-components

yarn add nekohack-ui

yarn add react react-dom styled-components

```

## Atomic Components

### Button

```tsx

import * as React from 'react'

import { NekoButton } from 'nekohack-ui'

export const App = () => {

    const submit = () => {

        //

    }

    return (

        Button

    )

}

```

#### Props

| # | Type | Default |

|:---|:---|:---|

| children | `React.ReactNode` `Array` | `` |

| onClick | `Function` | `` |

### Input

```tsx

import * as React from 'react'

import { NekoInput } from 'nekohack-ui'

export const App = () => {

    const [value, setValue] = React.useState('Input')

    return (

        

    )

}

```

#### Props

| # | Type | Default |

|:---|:---|:---|

| id | `String` | `` |

| role | `String` | `` |

| label | `String` | `` |

| explain | `String` | `` |

| value | `String` | `` |

| placeholder | `String` | `` |

| password | `String` | `` |

| targets | `Array` | `[]` |

| onChange | `Function` | `` |

### Label

```tsx

import * as React from 'react'

import { NekoLabel } from 'nekohack-ui'

export const App = () => {

    return (

        Label

    )

}

```

#### Props

| # | Type | Default |

|:---|:---|:---|

| children | `React.ReactNode` | `` |

### Select

```tsx

import * as React from 'react'

import { NekoSelect } from 'nekohack-ui'

const options = [

    {

        value: 1,

        text: 'Angular',

    },

    {

        value: 2,

        text: 'React',

    },

    {

        value: 3,

        text: 'Vue',

    },

]

export const App = () => {

    const [value, setValue] = React.useState(1)

    return (

        

    )

}

```

#### Props

| # | Type | Default |

|:---|:---|:---|

| id | `String` | `` |

| label | `String` | `` |

| explain | `String` | `` |

| options | `Array<{ value: number text: string}>` | `` |

| value | `Number` | `` |

| onChange | `Function` | `` |

## Modules

### Accordion

```tsx

import * as React from 'react'

import { NekoAccordion } from 'nekohack-ui'

type Item = {

    itemId: number

    itemName: string

    backgroundColor: string

    color: string

}

const singleItemList: Item[] = [

    {

        itemId: 0,

        itemName: 'Web',

        backgroundColor: '#0033ff',

        color: '#fff',

    },

    {

        itemId: 1,

        itemName: 'HTML5',

        backgroundColor: '#0099ff',

        color: '#000',

    },

    {

        itemId: 2,

        itemName: 'CSS',

        backgroundColor: '#00ff99',

        color: '#000',

    },

]

export const App = () => {

    const handleItemClass = () => {

        //

    }

    return (

        

    )

}

```

#### Props

| # | Type | Default |

|:---|:---|:---|

| labelText | `String` | `` |

| title | `String` | `` |

| items | `Array` | `` |

| updateItemClass | `Function` | `` |