https://github.com/beenotung/react-any-data
React component as viewer and editor for general data type.
https://github.com/beenotung/react-any-data
Last synced: 8 months ago
JSON representation
React component as viewer and editor for general data type.
- Host: GitHub
- URL: https://github.com/beenotung/react-any-data
- Owner: beenotung
- License: bsd-2-clause
- Created: 2021-01-17T18:30:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-30T17:38:08.000Z (almost 3 years ago)
- Last Synced: 2025-02-03T10:02:56.833Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 43.9 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-any-data
React component as viewer and editor for general data type.
[](https://www.npmjs.com/package/react-any-data)
Inspired from [s-data](https://github.com/beenotung/s-data);
works best with [use-state-proxy](https://github.com/beenotung/use-state-proxy).
Demo: https://react-any-data-demo.surge.sh/
## Installation
```bash
## using npm
npm install react-any-data
## or using yarn
yarn add react-any-data
## or using pnpm
pnpm install react-any-data
```
## Typescript Signature
```typescript
export type DataProps = {
name: PropertyKey;
state: object & any;
onChange?: (() => void);
readOnly?: boolean;
sort?: boolean; // for Map and Set
};
export default function Data(props: DataProps): JSX.Element;
```
## Features
- [x] General data type viewer and editor
- [x] Number
- [x] String (text or textarea)
- [x] Boolean
- [x] Array
- [x] Map
- [x] Set
- [x] Date
- [x] Object
- [X] Custom Classes
- [x] Support custom styling with css classes
- [x] Tested with `@testing-library/jest-dom`
## Usage Example
```typescript jsx
import React from 'react';
import Data from 'react-any-data';
import {
registerMutableMethodsByClassConstructor,
useStateProxy,
} from 'use-state-proxy';
import './DemoNestedState.scss';
class Counter {
value = 0;
inc(amount = 1) {
this.value += amount;
}
dec(amount = 1) {
this.value -= amount;
}
}
registerMutableMethodsByClassConstructor(Counter, ['inc', 'dec']);
function Example() {
const state = useStateProxy({
id: 1,
name: 'Alice',
date: new Date(),
toggle: true,
friends: [
{ id: 2, name: 'Bob', tags: ['typescript'] },
{ id: 3, name: 'Cherry', tags: ['react'] },
],
tags: new Set(['stencil', 'proxy']),
map: new Map([
[1, 'one'],
[2, 'two'],
]),
counter: new Counter(),
});
console.log(unProxy(state)) // print during each re-render
return (
<>
Demo Nested State
{JSON.stringify(
{
state,
setEntries: Array.from(state.tags),
mapEntries: Array.from(state.map),
},
null,
2,
)}
>
);
}
export default Example;
```
Details see [DemoNestedState.tsx](./src/DemoNestedState.tsx)
## License
[BSD-2-Clause](./LICENSE) (Free Open Source Software)