Course
Interfaces
CourseProps
API documentation for the Community-JS Widget component. Learn about the available props and the CSS API.
Import
import {Widget} from '@selfcommunity/react-ui';
Component Name
The name SCWidget can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCWidget-root | Styles applied to the root element. |
Extends
Indexable
[p: string]: any
Any other properties
Properties
| Property | Type | Description | Inherited from |
|---|---|---|---|
actions? | ReactNode | Actions Default null | - |
className? | string | Overrides or extends the styles applied to the component. Default null | WidgetProps.className |
course? | SCCourseType | Course Object Default null | - |
courseId? | number | Id of the course for filter the feed Default null | - |
CourseParticipantsButtonComponentProps? | CourseParticipantsButtonProps | Props to spread to CourseParticipantsButton component Default {} | - |
CourseSkeletonComponentProps? | CourseSkeletonProps | Props to spread to CourseSkeleton component Default {} | - |
template? | SCCourseTemplateType | Course template type Default 'preview' | - |
userProfileSnippet? | boolean | It shows a different snippet type | - |
CourseSkeletonProps
API documentation for the Community-JS Widget component. Learn about the available props and the CSS API.
Import
import {Widget} from '@selfcommunity/react-ui';
Component Name
The name SCWidget can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCWidget-root | Styles applied to the root element. |
Extends
Indexable
[p: string]: any
Other props
Properties
| Property | Type | Description | Overrides |
|---|---|---|---|
actions? | ReactNode | Prop to pass an action to be rendered next to the skeleton | - |
className? | string | Overrides or extends the styles applied to the component. Default null | WidgetProps.className |
CourseProps? | CourseProps | CourseProps | - |
skeletonsAnimation? | false | "wave" | "pulse" | Disable skeleton animation | - |
template? | SCCourseTemplateType | Course template type Default 'preview' | - |
Functions
Course()
Course(
inProps):Element
API documentation for the Community-JS Course component. Learn about the available props and the CSS API.
This component renders a course item. Take a look at our demo component here
Import
import {course} from '@selfcommunity/react-ui';
Component Name
The name SCCourse can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCCourses-root | Styles applied to the root element. |
| chip | .SCCourses-chip | Styles applied to the chip element. |
| previewRoot | .SCCourses-preview-root | Styles applied to the root element in the preview template. |
| previewActions | .SCCourses-preview-actions | Styles applied to the actions section in the preview template. |
| previewAvatar | .SCCourses-preview-avatar | Styles applied to the avatar in the preview template. |
| previewCategory | .SCCourses-preview-category | Styles applied to the category element in the preview template. |
| previewCompletedStatus | .SCCourses-preview-completed-status | Styles applied to indicate the completed status in the preview template. |
| previewContent | .SCCourses-preview-content | Styles applied to the content section in the preview template. |
| previewCreator | .SCCourses-preview-creator | Styles applied to the creator element in the preview template. |
| previewImage | .SCCourses-preview-image | Styles applied to the image in the preview template. |
| previewImageWrapper | .SCCourses-preview-image-wrapper | Styles applied to the wrapper of the image in the preview template. |
| previewInfo | .SCCourses-preview-info | Styles applied to the info section in the preview template. |
| previewName | .SCCourses-preview-name | Styles applied to the name element in the preview template. |
| previewNameWrapper | .SCCourses-preview-name-wrapper | Styles applied to the name wrapper in the preview template. |
| previewProgress | .SCCourses-preview-progress | Styles applied to indicate the progress section in the preview template. |
| previewProgressBar | .SCCourses-preview-progress-bar | Styles applied to the progress bar in the preview template. |
| snippetRoot | .SCCourses-snippet-root | Styles applied to the root element in the snippet template. |
| snippetAvatar | .SCCourses-snippet-avatar | Styles applied to the avatar element in the snippet template. |
| snippetImage | .SCCourses-snippet-image | Styles applied to the image element in the snippet template. |
Parameters
| Parameter | Type | Description |
|---|---|---|
inProps | CourseProps |
Returns
Element
CourseSkeleton()
CourseSkeleton(
inProps):Element
API documentation for the Community-JS Course Skeleton component. Learn about the available props and the CSS API.
Import
import {CourseSkeleton} from '@selfcommunity/react-ui';
Component Name
The name SCCourse-skeleton-root can be used when providing style overrides in the theme.
CSS
| Rule Name | Global class | Description |
|---|---|---|
| root | .SCCourse-skeleton-root | Styles applied to the root element. |
| image | .SCCourse-skeleton-image | Styles applied to the image element. |
| action | .SCCourse-skeleton-action | Styles applied to action section. |
Parameters
| Parameter | Type |
|---|---|
inProps | CourseSkeletonProps |
Returns
Element