https://github.com/regionjs/region-core

Progressive View Model Management Library
https://github.com/regionjs/region-core

react redux swr typescript

Last synced: about 1 month ago
JSON representation

Progressive View Model Management Library

• Host: GitHub
• URL: https://github.com/regionjs/region-core
• Owner: regionjs
• License: mit
• Created: 2019-01-04T08:52:04.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-13T08:26:04.000Z (3 months ago)
• Last Synced: 2024-10-13T14:13:24.539Z (about 2 months ago)
• Topics: react, redux, swr, typescript
• Language: TypeScript
• Homepage: https://regionjs.github.io/region-core
• Size: 31.4 MB
• Stars: 114
• Watchers: 3
• Forks: 5
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Contributing: docs/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: docs/CODE_OF_CONDUCT.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `region-core`
• awesome-react-hooks-cn - `region-core`
• awesome-react-hooks - `region-core`
• awesome-react-hooks - `region-core`

README

        
# region-core

[![version](https://img.shields.io/npm/v/region-core.svg?style=flat-square)](http://npm.im/region-core)

[![npm downloads](https://img.shields.io/npm/dm/region-core.svg?style=flat-square)](https://www.npmjs.com/package/region-core)

[![codecov](https://img.shields.io/codecov/c/gh/regionjs/region-core)](https://codecov.io/gh/regionjs/region-core)

[![MIT License](https://img.shields.io/npm/l/region-core.svg?style=flat-square)](http://opensource.org/licenses/MIT)

region-core is a progressive View Model Management Framework. You can use it while using react state, redux, and benefit from it.

English | [中文](https://github.com/regionjs/region-core/blob/master/docs/README-zh_CN.md)

## Get Started

- install

```bash

npm i region-core

```

- Build your Component above region

```typescript jsx

import {createRegion} from 'region-core';

const region = createRegion('initialValue');

const handleChange = e => region.set(e.target.value);

const Component = () => {

    const value = region.useValue();

    return ;

};

```

- Fetching data with region

```typescript jsx

import {createRegion} from 'region-core';

const region = createRegion();

const loadUser = region.loadBy(asyncFuncion);

// call loadUser in application lifecycle

loadUser({userId: 1});

const Component = () => {

    const value = region.useValue();

    const loading = region.useLoading();

    const error = region.useError();

    // ...

    return 
{value}
;

}

```


## Docs

[Document And Best Practices](https://github.com/regionjs/region-core/blob/master/docs/Document.md)

[Migrate Guide](https://github.com/regionjs/region-core/blob/master/docs/Migrate.md)

[ChangeLog](https://github.com/regionjs/region-core/blob/master/docs/CHANGELOG.md)

[Request for Comments](https://github.com/regionjs/rfcs/issues)

## Example

[Online Example](https://regionjs.github.io/region-core/)

```bash

git clone https://github.com/regionjs/region-core.git

cd example

npm i

npm start

```

[SSR: NextJs with Region](https://codesandbox.io/s/region-ssr-6xprd)

## Contribute

Feel free to raise issues and PR.