# preem-ui

> UI components for React Native that support custom theming

Latest version **0.1.1** (published 2023-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install preem-ui
pnpm add preem-ui
yarn add preem-ui
bun add preem-ui
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-01-13 |
| First published | 2022-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 49.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ian Henry |
| Maintainers | ianhenrydev |
| Keywords | React Native, UI Components, Theme |

## Links

- npm: https://www.npmjs.com/package/preem-ui
- Repository: https://github.com/QuadReactorLLC/preem-ui
- Issues: https://github.com/QuadReactorLLC/preem-ui/issues
- npm.io page: https://npm.io/package/preem-ui

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2023-01-13
- 0.1.0 — 2023-01-13
- 0.0.5 — 2022-03-24
- 0.0.4 — 2022-03-18
- 0.0.3 — 2022-03-18
- 0.0.2 — 2022-03-18
- 0.0.1 — 2022-03-17

## README

# preem-ui

UI components for React Native that support custom theming.

## Installation

Install the library using yarn:

`yarn add preem-ui`

Or npm:

`npm install --save preem-ui`

## Setting up your theme

Next, wrap your app in a PreemThemeProvider. This allows you specify a common theme for all UI components to use.

```typescript
import { PreemTheme, PreemThemeProvider } from 'preem-ui'

const theme: PreemTheme = {
  dark: true,
  colors: {
    primary: 'green',
    background: '#212121',
    card: '#2f2f2f',
    text: '#fff',
    border: '#282828',
    notification: '#ff6600',
  },
}

export default function App() {
    return (
        <PreemThemeProvider theme={theme}>
            {/* Rest of your app code */}
        <PreemThemeProvider>
    )
}
```

## Usage with `react-navigation`

This library is designed to work with `react-navigation`. Just pass your custom `PreemTheme` as a prop when you create your `NavigationContainer`.

`<NavigationContainer theme={theme}>`

## Components

| Component      | Description                                                                        |
| -------------- | ---------------------------------------------------------------------------------- |
| Button         | Custom `TouchableOpacity` styled as a simple button.                               |
| Card           | `View` styled to look like a card.                                                 |
| CardList       | Responsive list of cards.                                                          |
| Fab            | Floating action button absolutely positioned in a corner.                          |
| Header         | Simple header text to appear at the top of a screen.                               |
| InnerContainer | View that is locked to a max width.                                                |
| Label          | Styled text to be used in combination with Inputs.                                 |
| Loading        | Centered loading spinner.                                                          |
| OuterContainer | Main container for screens. Supports scrolling and accounts for status bar height. |
| TabBar         | Toggle selector for a small number of items.                                       |
| Table          | Scrollable and sortable table.                                                     |
| Text           | Styled `Text`.                                                                     |
| TextInput      | Styled `TextInput`.                                                                |

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