useListItems

This component could either be used as hook or as hoc. Both hook and hoc take the SPRestAdapter as their first argument - this is so that these components dont have to create their own instance which can overwrite your instance.

Arguments

Name	Type	Default	Description
spRest	SPRest	-	asdsad
url	string	-	The list's site-relative url e.g. /sites/MyWebsite/MyList
viewFields	string[]	[]	Viewfields to read from the list.
rowLimit	number	0	Sets how many items should be returned.
where	string	""	Query to fitler/sort list items before return

Usage as hook

import { useListItems } from 'sp-react-utils';

const MyComponent = () => {

    const TitleColumnName = 'Title';

    const listUrl = '/sites/Portal/ItemList';
    const viewFields = [TitleColumnName];
    const rowLimit = 1;

    const {items, isLoading, error} = useListItems(sp, listUrl, viewFields, rowLimit)

    return (
        {
            {
                isLoading ? <div>Loading...</div> :
                <ul>
                {
                    items.map(item => <li>{item[TitleColumnName]}</li>)
                }
                </ul>
            }
        }
    )
}

items: Array, isLoading: boolean, error: Error

Usage as hoc

import { UseListItems } from 'sp-react-utils';

const MyComponent = () => {
    const TitleColumnName = 'Title';

    const listUrl = '/sites/Portal/ItemList';
    const viewFields = [TitleColumnName];
    const rowLimit = 1;

    const component = (items, isLoading, error) => (
        <div>
        {
            isLoading ? <div>Loading...</div> :
            <ul>
            {
                items.map(item => <li>{item[TitleColumnName]}</li>)
            }
            </ul>
        }
        </div>
    );

    return (
        <UseListItems
			spRestAdapter={mockSPRestAdapter}
			component={component}
			url={"/sites/mysite/customlist"}
		/>
    )
}

useListItems

const MyFunctionComponent = ({ listurl }) => {

    const fieldrefs = ['Title', 'ID', 'MyCustomFieldName'];
    const [rowlimit, setRowlimit] = useState(0); 

    const [items, error] = useListItems(sp, listurl, fieldrefs);
    return (
        <ul>
            <button OnClick={() => setRowlimit(rowlimit + 1)}>more</button>
            {items.map(item => <li>{item['Title']</li>)}
        </ul>
    )
} ```