1.2.5 • Published 6 months ago
@thoughtindustries/content v1.2.5
@thoughtindustries/content
A collection of content specific resources for @thoughtindustries/helium UI components. It comes with typings and React Hooks for making graphql queries and mutations, as well as utilities for content hydration.
Import
import {
GlobalTypes,
useCatalogContentQuery,
LoadingDots,
hydrateContent
} from '@thoughtindustries/content';
Usage
// run hook to query catalog content
const { data, loading, error } = useCatalogContentQuery({
variables: {
sortColumn: GlobalTypes.SortColumn.PublishDate,
sortDirection: GlobalTypes.SortDirection.Desc,
resultsDisplayType: GlobalTypes.ContentItemDisplayType.Grid,
page: 2
},
});
// render loading dots before data is resolved
if (loading) {
return <LoadingDots />
}
// hydrate content response when data is resolved
const { i18n } = useTranslation();
if (data) {
const { contentItems = [] } = data.CatalogContent;
return contentItems.map((item, index) => {
const hydratedItem = hydrateContent(i18n, item);
// render component for hydrated content item
// return ...
});
}
Content Header
The Content Header
component is used to display the title
, description
, and image
of a Course or Learning Path. All content types, except learning paths, can also display rating
and ratingsCount
information.
Example code
import { ContentHeader } from '@thoughtindustries/content';
export function MyComponent() {
// ...
return (
<ContentHeader contentKind={contentKind} slug={courseSlug} showStars={true} showImage={true} />
);
}
Props
Name | Required | Type | Description |
---|---|---|---|
contentKind | Yes | string | The contentKind of the Content, e.g., learningPath , course . |
slug | Yes | slug | The slug of the content that should be displayed. |
showStars | No | boolean | Controls whether a course's rating is displayed, shown in stars. |
showImage | No | boolean | Controls whether a piece of content's Detail Image is displayed. |
1.2.5
6 months ago
1.2.4
9 months ago
1.2.3
10 months ago
1.2.2
10 months ago
1.2.1
10 months ago
1.2.0
11 months ago
1.2.0-beta.3
1 year ago
1.2.0-beta.1
1 year ago
1.2.0-beta.0
1 year ago
1.1.0-alpha.5
2 years ago
1.1.0-alpha.4
2 years ago
1.1.0-alpha.3
2 years ago
1.1.0-alpha.2
2 years ago
1.1.0-alpha.1
2 years ago
1.1.0-alpha.0
2 years ago
1.0.1-alpha.4
2 years ago
1.0.1-alpha.3
2 years ago
1.0.1-alpha.2
2 years ago
1.0.1-alpha.1
2 years ago
1.0.1-alpha.0
2 years ago