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/
npm install @cond/use-feathers -S
npm i @feathersjs/feathers @feathersjs/socketio-client socket.io-client @feathersjs/authentication-client -S
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;
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
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
)
const { login } = useFeathers();
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;
const { useFind, useCreate, useUpdate, useRemove, usePatch } = useFeathers();
All hooks return three parameters. Action, state and resetState.
state initial state
{
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
const { createAction, state: createState, resetCreateState } = useCreate('todo');
const { findAction, state: findState, resetFindState } = useFind('todo');
const { getAction, state: getState, resetGetState } = useGet('todo');
const { updateAction, state: updateState, resetUpdateState } = useUpdate('todo');
const { patchAction, state: patchState, resetPatchState } = usePatch('todo');
const { removeAction, state: removeState, resetRemoveState } = useRemove('todo');