Skip to content

fracto-team/http-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

http-client

Customizable React http client library

NPM JavaScript Style Guide

Install

npm install --save http-client

Usage

export default function App() {
	const [todos, setTodos] = useState([]);
	
	const todosAPI = useAPI("GET", "/todos");
	
	const fetchTodos = useCallback(() => {
		todosAPI.call();
	},  [todosAPI, params]);
	
	useEffect(() => {
		fetchTodos();
	}, []);
	
	useEffect(() => {
		if(todosAPI.networkState === 'success' && todosAPI.body) {
			setTodos(todosAPI.body);
		}
	}, [todosAPI.body, todosAPI.networkState]);
	
	return (
		<div>
			{todosAPI.loading && <div>Loading...</div>}
			{
				!todosAPI.loading && todosAPI.networkState === "success" && (
					<div>
						{todos.map((item) => (<div key={item.id}>{item.title}</div>))}
					</div>
				)
			}
			{!todosAPI.loading && todosAPI.networkState === "error" && (<div>Error fetching todos</div>)}
		</div>
	);
}

See more advanced demo on codesandbox

License

MIT © https://github.com/fracto-team