croods

library3.1.0jsnpmunverified

Croods is a React library that abstracts REST API data layers, providing a declarative component-based API for CRUD operations. The current stable version is 3.1.0. It requires axios, lodash, react, and react-dom as peer dependencies. Key differentiators include a simple Fetch component for GET requests, built-in state management, and TypeScript support. It is designed to reduce boilerplate code when integrating REST backends with React applications. npm: croods, GitHub: SeasonedSoftware/croods, docs: croods.netlify.com. Released on npm, last update 2021.

testing

npm install croods

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · CROODS

croods

testingjavascriptv3.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Fetch

✓ import { Fetch } from 'croods'

✗ import Fetch from 'croods'

Fetch is a named export, not default. Requires React 16.8+.

croods

✓ import croods from 'croods'

✗ import { croods } from 'croods'

Default export is an object with helper functions like createCroods; named exports are components. Check your import type.

useCroodsState

✓ import { useCroodsState } from 'croods'

✗ import useCroodsState from 'croods'

Hook named export. Hooks cannot be used outside React function components.

Basic usage of the Fetch component to GET a list of beagle images from an API and render them.

import React from 'react' import { Fetch } from 'croods' const App = () => ( <Fetch baseUrl="https://dog.ceo/api/breed/beagle" name="images" parseResponse={response => response.data.message} render={list => ( <div> <h1>Hello Beagles!</h1> <ul> {list.map((item, index) => ( <li key={index}><img src={item} alt={`Beagle ${index}`} /></li> ))} </ul> </div> )} /> ) export default App

Debug

Known issues

deprecatedCroods v2 had a different component API (Info, List, etc.) that was removed in v3.

fix

Migrate to v3 with Fetch component. See migration guide.

affects: <3.0.0

gotchaThe 'name' prop in Fetch is required and used for caching; two Fetch with same 'name' will share state.

fix

Ensure unique 'name' per unique resource unless sharing state is intended.

affects: >=3.0.0

gotchaparseResponse must return the data array; otherwise render receives undefined.

fix

Always return the parsed data from parseResponse.

affects: >=3.0.0

breakingPeer dependencies require exact versions: react@^17.0.2, react-dom@^17.0.2, axios@^0.21.1, lodash@^4.17.21. Incompatible versions may cause runtime errors.

fix

Install exact versions: npm install react@17.0.2 react-dom@17.0.2 axios@0.21.1 lodash@4.17.21

affects: >=3.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'croods'

Package not installed.

fix

npm install croods --save

TypeError: Cannot read property 'map' of undefined

parseResponse not returning correct data.

fix

Ensure parseResponse returns the array, e.g., response.data.message

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

useCroodsState used outside a React function component.

fix

Use the hook inside a function component, not a class or regular function.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

axiosrequiredHTTP client for REST API calls

lodashrequiredUtility library for data manipulation

reactrequiredPeer dependency for React components

react-domrequiredPeer dependency for React DOM rendering

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/SeasonedSoftware/croods ↗

packagecroods ↗

homepagehttps://github.com/SeasonedSoftware/croods#readme ↗