# @tsei/note

> 🌌Fantastic UI in tsei.jp/note

Latest version **0.1.1** (published 2020-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tsei/note
pnpm add @tsei/note
yarn add @tsei/note
bun add @tsei/note
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2020-12-14 |
| First published | 2020-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 66.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | tsei |
| Maintainers | tsei |
| Keywords | react, motion, gesture, animation, typescript, material-ui, material design |

## Links

- npm: https://www.npmjs.com/package/@tsei/note
- Repository: https://github.com/tseijp/note
- Homepage: http:///
- Issues: https://github.com/tseijp/note/issues
- npm.io page: https://npm.io/package/@tsei/note

## Dependencies (2)

- [use-grid](https://npm.io/package/use-grid.md) ^0.9.1
- [react-cookie](https://npm.io/package/react-cookie.md) ^4.0.3

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.1.1 (latest) — 2020-12-14
- 0.1.0 — 2020-12-14

## README

<p align="center">
    <h1 align="center">Note</h1>
</p>


# Install via npm
- `npm i -S @tsei/note`

# Get Started
- `git clone https://github.com/tseijp/note`
- `cd note`, `npm i` and `npm start`
- open browser and visit [http://localhost:3000](http://localhost:3000)
- Now you can go to our [demo](https://tsei.jp/note/), and try its usage.

### Recipes

<table>
<tr align="center"><td>
    </td><td><br/>
        <strong>Component</strong>
    </td><td><br/>
        <strong>Input Values</strong>
    </td><td><br/>
        <strong>Return Values</strong>
    </td></tr>
<tr><td>

###### Note
manage note data and api  
`const [note, set] = useNote(url, fetcher, config)`

</td><td>

```tsx
<Note url="..."
  fetcher={...}
  {...config}>
  {(note, set) =>
    <>{/*_*/}</>
  }
</Note>
```

</td><td>

  1. @url: string
  1. @fetcher: function
  1. @config: object

</td><td>

  1. @note: Note
  1. @set: function

</td></tr>
<tr><td>

###### User
manage user info and API  
`const [user, set] = useUser(url, fetcher, config)`

</td><td>

```tsx
<User url="..."
  fetcher={...}
  {...config}>
  {(user, set) =>
    <>{/*_*/}</>
  }
</User>
```

</td><td>

  1. @url: string
  1. @fetcher: function
  1. @config : object

</td><td>

  1. @user: `User`

      <details>

      - @username : user name from fetched API e.g. tseijp
      - @authtoken: user token from cookie
      - @input    : for input Components
      - @status   : the acton at fetch e.g. IN, UP, OUT or ""
      - @userlang : user language from window.navigator.language e.g. ja, en

      </details>

  1. @set:

      <details>

      - `setUser()`       : Toggle fetching
      - ~`setUser(null)`   : switch status IN->UP or UP->IN~
      - ~`setUser(boolean)`: switch status '' or IN|UP|OUT~

      </details>
</ol>
</td></tr>
</table>


### Available API

URL        |Description
:----------|:-
/auth/     |Distribute Auth Token
/api/      |Restful Api Router
/api/note/ |Note Api

key of `/api/note`     |Description
:----------------------|:-
next                   |next pagination url
previous               |previous pagination url
results                |seriaized data as array
results[0].id          |primary key
results[0].note_id     |primary key of parent
results[0].ja_text     |text data
results[0].en_text     |text data
results[0].is_author   |whether request user is author
results[0].posted_time |time when it was posted
results[0].author_name |username of posted user

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