https://github.com/afeiship/use-active-state
React hook for active state.
https://github.com/afeiship/use-active-state
active component hook rc react state
Last synced: 9 days ago
JSON representation
React hook for active state.
- Host: GitHub
- URL: https://github.com/afeiship/use-active-state
- Owner: afeiship
- License: mit
- Created: 2016-03-22T06:18:22.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2021-09-07T05:28:57.000Z (over 4 years ago)
- Last Synced: 2025-07-30T22:33:46.497Z (9 months ago)
- Topics: active, component, hook, rc, react, state
- Language: TypeScript
- Homepage:
- Size: 4.48 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# use-active-state
> React hook for active state.
[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]
## installation
```shell
npm install -S @jswork/use-active-state
```
## usage
```tsx
import React from 'react';
import useActiveState from '@jswork/use-active-state';
import styled from 'styled-components';
const Container = styled.div`
width: 40%;
min-width: 400px;
margin: 30px auto 0;
padding: 50px;
border: 1px solid #ccc;
.row {
display: flex;
margin-bottom: 10px;
strong {
display: inline-block;
width: 120px;
}
}
.result {
background: #eee;
padding: 20px;
border: 1px dashed #f60;
margin-top: 10px;
}
`;
export default (props: any) => {
const { state, sync, get, $ } = useActiveState(() => {
console.log('state:', state, get('username'));
});
console.log('state:', state);
return (
username:
email:
password:
Submit
{
$.reset();
}}>reset
{JSON.stringify(state, null, 2)}
isTouched: {String($.touched())}
);
};
```
## preview
- https://afeiship.github.io/use-active-state/
## license
Code released under [the MIT license](https://github.com/afeiship/use-active-state/blob/master/LICENSE.txt).
[version-image]: https://img.shields.io/npm/v/@jswork/use-active-state
[version-url]: https://npmjs.org/package/@jswork/use-active-state
[license-image]: https://img.shields.io/npm/l/@jswork/use-active-state
[license-url]: https://github.com/afeiship/use-active-state/blob/master/LICENSE.txt
[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/use-active-state
[size-url]: https://github.com/afeiship/use-active-state/blob/master/dist/use-active-state.min.js
[download-image]: https://img.shields.io/npm/dm/@jswork/use-active-state
[download-url]: https://www.npmjs.com/package/@jswork/use-active-state