# febs-react-component

> > A component framework for React Native / React Web.

Latest version **0.1.11** (published 2017-03-24) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install febs-react-component
pnpm add febs-react-component
yarn add febs-react-component
bun add febs-react-component
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.11 |
| Published | 2017-03-24 |
| First published | 2017-02-09 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Maintainers | brainpoint |
| Keywords | react-native, react, febs, febs-react-web, febs-react-component |

## Links

- npm: https://www.npmjs.com/package/febs-react-component
- Repository: https://github.com/brainpoint/febs-react-component
- Homepage: https://github.com/brainpoint/febs-react-component#readme
- Issues: https://github.com/brainpoint/febs-react-component/issues
- npm.io page: https://npm.io/package/febs-react-component

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.1
- [deep-equal](https://npm.io/package/deep-equal.md) ^1.0.1
- [react-router](https://npm.io/package/react-router.md) ^3.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.11 (latest) — 2017-03-24
- 0.1.10 — 2017-03-24
- 0.1.9 — 2017-03-24
- 0.1.5 — 2017-02-27
- 0.1.4 — 2017-02-26
- 0.1.3 — 2017-02-26
- 0.1.2 — 2017-02-26
- 0.1.1 — 2017-02-26
- 0.1.0 — 2017-02-26
- 0.0.6 — 2017-02-26
- 0.0.5 — 2017-02-26
- 0.0.4 — 2017-02-26
- 0.0.3 — 2017-02-26
- 0.0.2 — 2017-02-12
- 0.0.1 — 2017-02-09

## README

# Febs React Component

> A component framework for React Native / React Web.


[![NPM](https://nodei.co/npm/febs-react-component.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/febs-react-component/)

# Install

Use npm to install:

```js
npm install febs-react-component --save
```
  It will copy directory `node_modules/febs-react-component` to `node_modules/react-component`

# Example

  see the files in path: ./demo/*.*
  ```js
  import React, { Component } from 'react';
  import { AppRegistry, StyleSheet, } from 'react-native';

  import { Navigator } from '../index'

  class app extends Component {
    render() {
      return (
        <Navigator
          ref='nav'
          defaultTitle={{ text: 'Title', }}
          defaultLeftButton={{ text: 'Back', }}
          defaultRightButton={{ text: 'Forward', onPress:()=>this.refs.nav.pop() }} 
          defaultBarTintColor='#2112'
          configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromBottom}
          initialRoute={{
            title:    {text: 'My Initial Scene'}, 
            component:Page    // Page中可以使用 props. 来操作.
          }}
        />
      );
    }
  }

  const styles = StyleSheet.create({});
  AppRegistry.registerComponent('app', () => app);
  ```

# React Native/Web compatible

see [demo](./demo).

## Components

* AlertView

    ![](demo/ui/alertView.jpg)
    ![](demo/ui/loadding.jpg)
    ![](demo/ui/toast.jpg)

* Button

    ![](demo/ui/button.jpg)

* Icons

    ![](demo/ui/icons.jpg)

* Navigator

    ![](demo/ui/nav.jpg)

* Page

    ![](demo/ui/page.jpg)

* RefreshListView    (from npm)
* RefreshScrollView  (from npm)
* TableViewCell

    ![](demo/ui/tableViewCell.jpg)

* TimerMgr
    
    timer管理; 可以在页面销毁时自动销毁存在的timer
    统一封装 requestAnimationFrame / cancelAnimationFrame 方法

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