# teste-ui-components-reactjs

> React JS UI components library

Latest version **1.1.4** (published 2022-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install teste-ui-components-reactjs
pnpm add teste-ui-components-reactjs
yarn add teste-ui-components-reactjs
bun add teste-ui-components-reactjs
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2022-08-03 |
| First published | 2022-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 5 |
| Unpacked size | 2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | felipemadia |

## Links

- npm: https://www.npmjs.com/package/teste-ui-components-reactjs
- npm.io page: https://npm.io/package/teste-ui-components-reactjs

## Dependencies (5)

- [sass](https://npm.io/package/sass.md) ^1.51.0
- [rc-slider](https://npm.io/package/rc-slider.md) 10.0.0
- [react-icons](https://npm.io/package/react-icons.md) ^4.3.1
- [react-datepicker](https://npm.io/package/react-datepicker.md) 4.8.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0

## Recent versions

- 1.1.4 (latest) — 2022-08-03
- 1.1.3 — 2022-08-03
- 1.1.2 — 2022-08-03
- 1.1.1 — 2022-08-03

## README

## CONECTE-SE Component Library ReactJS

The purpose of the **@conecte-se/ui-components-reactjs** library is to help teams design and build products quickly and consistently. The library provides a collection of reusable components, guided by patterns in the design system.​

## Usage

### Install

```bash
npm install --save @conecte-se/ui-components-reactjs
```

### Usage component

```jsx
import React from 'react'

// imports to use the lib
import '@conecte-se/ui-components-reactjs/dist/index.css'
// import to use the custom datepicker and input range
import '@conecte-se/ui-components-reactjs/src/styles/theme/external_lib_themes.scss'

import { Button } from '@conecte-se/ui-components-reactjs'

const ButtonExample = () => {
  return <Button>button text</Button>
}
```

### Usage utils (spacing and visibility)

```jsx
import React, { useState } from 'react'

import '@conecte-se/ui-components-reactjs/src/styles/utils.scss'

const App = () => {
  return (
    <div>
      // m, mt, ml, mb and mr (0 to 5)
      <div className="mt-5">Margin</div>
      // p, pt, pl, pb and pr (0 to 5)
      <div className="pt-5">Padding</div>
      // width and height (%): 0, 25, 50, 75 and 100
      <div className="w-100 h-100">Width and Height</div>
      // visible and invisible (based on visibility property)
      <div className="visible">Visible</div>
      // display-visible and display-invisible (based on display property)
      <div className="display-visible">Display visible</div>
    </div>
  )
}
```

### Usage theme

```jsx
import React, { useState } from 'react'

// import the theme and the component used to change it
import { Button, useTheme } from '@conecte-se/ui-components-reactjs'

const App = () => {
  const [theme, setTheme] = useTheme()
  const [operationTheme, setOperationTheme] = useState(theme === 'dark')

  const changeThemeMode = (localTheme) => {
    setTheme(localTheme ? 'dark' : 'light')
    setOperationTheme(localTheme)
  }

  return (
    <Button
      ghost
      onClick={() => {
        changeThemeMode(!operationTheme)
      }}
    >
      {theme}
    </Button>
  )
}
```
**Note:** the theme will be stored in the browser's local storage.

## License

MIT License

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