# @cond/use-feathers

> React bindings for FeathersJS

Latest version **0.1.1** (published 2022-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cond/use-feathers
pnpm add @cond/use-feathers
yarn add @cond/use-feathers
bun add @cond/use-feathers
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-01-16 |
| First published | 2020-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 223.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | iamaroott@gmail.com |
| Maintainers | cond |
| Keywords | react, react provider, feathers |

## Links

- npm: https://www.npmjs.com/package/@cond/use-feathers
- Repository: https://github.com/indatawetrust/use-feathers
- Homepage: https://github.com/indatawetrust/use-feathers#readme
- Issues: https://github.com/indatawetrust/use-feathers/issues
- npm.io page: https://npm.io/package/@cond/use-feathers

## 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.1 (latest) — 2022-01-16
- 0.1.0 — 2020-06-27
- 0.0.13 — 2020-06-25
- 0.0.12 — 2020-06-20
- 0.0.11 — 2020-06-20
- 0.0.10 — 2020-06-20
- 0.0.9 — 2020-06-18
- 0.0.8 — 2020-06-18
- 0.0.7 — 2020-06-18
- 0.0.6 — 2020-06-16
- 0.0.5 — 2020-06-16
- 0.0.4 — 2020-06-14
- 0.0.3 — 2020-04-11
- 0.0.2 — 2020-03-25
- 0.0.1 — 2020-03-24

## README

[![Build Status](https://travis-ci.org/indatawetrust/use-feathers.svg?branch=master)](https://travis-ci.org/indatawetrust/use-feathers)

This package is based on feathers js client packages. For more detailed information https://docs.feathersjs.com/api/client.html

Sample project https://github.com/indatawetrust/use-feathers/tree/master/demo. You can try it at https://naughty-cray-bdab6d.netlify.app/

## Installation

```
npm install @cond/use-feathers -S
```

### feathers client
```
npm i @feathersjs/feathers @feathersjs/socketio-client socket.io-client @feathersjs/authentication-client -S
```

```js
import io from 'socket.io-client';
import feathers from '@feathersjs/feathers';
import socketio from '@feathersjs/socketio-client';
import auth from '@feathersjs/authentication-client';

const URL = process.env.REACT_APP_URL;

const socket = io(URL);
const feathersClient = feathers()
  .configure(socketio(socket))
  .configure(auth({
    storage: window.localStorage
  }));

export default feathersClient;
```

#### FeathersProvider

#### Props

**client** feathersjs client

**initialServices** services to be used in the application. state values are created.

**realtime** it is off by default. In case you open it, the state is updated for the relevant service according to the service events. https://docs.feathersjs.com/api/events.html#service-events

```jsx
import React from 'react'
import ReactDOM from 'react-dom'

import { FeathersProvider } from '@cond/use-feathers'
import feathersClient from './feathersClient'

import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <FeathersProvider
    client={feathersClient}
    initialServices={['todo']}
  >
    <App />
  </FeathersProvider>,
  rootElement
)
```
### useFeathers
```js
const { login } = useFeathers();
```
##### login

```jsx
import React from "react";
import { Form, Input, Button, Checkbox, message } from "antd";
import { useFeathers } from "@cond/use-feathers";

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 6 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 6 },
};

const Login = () => {
  const { login } = useFeathers();
  const onFinish = (values) => {
    login(values)
      .then(() => {
        message.success('login successful');
      });
      .catch((error) => {
        message.error(error.message);
      });
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Email"
        name="email"
        type="email"
        rules={[{ required: true, message: "Please input your email!" }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Login;
```

## crud hooks
```js
const { useFind, useCreate, useUpdate, useRemove, usePatch } = useFeathers();
```

All hooks return three parameters. Action, state and resetState.

**state**
initial state
```js
{
  isPending: false,
  isLoaded: false,
  error: null,
  data: null,
}
```

**action**
For detailed information about actions and parameters they take: https://docs.feathersjs.com/guides/basics/services.html#service-methods

**resetState**
returns to the state initial value

### useCreate
```js
const { createAction, state: createState, resetCreateState } = useCreate('todo');
```

### useFind
```js
const { findAction, state: findState, resetFindState } = useFind('todo');
```

### useGet
```js
const { getAction, state: getState, resetGetState } = useGet('todo');
```

### useUpdate
```js
const { updateAction, state: updateState, resetUpdateState } = useUpdate('todo');
```

### usePatch
```js
const { patchAction, state: patchState, resetPatchState } = usePatch('todo');
```

### useRemove
```js
const { removeAction, state: removeState, resetRemoveState } = useRemove('todo');
```

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