0.1.30 • Published 7 months ago
@healthcarelocator/sdk-react v0.1.30
Usage
<HclSdk config={config} className={className} style={style} widget={widget} widgetProps={widgetProps} />
Props
Props | Type |
---|---|
config | Config |
className | string |
style | CSSProperties |
widget | "map" |
widgetProps | WidgetProps |
initScreen | "home" | "search" |
Config Properties
Config Properties | Type |
---|---|
apiKey | string |
lang | string | undefined |
appName | string | undefined |
appURL | string | undefined |
showSuggestModification | boolean | undefined |
enableDarkMode | boolean | undefined |
enableMapDarkMode | boolean | undefined |
enableLeafletAttribution | boolean | undefined |
disableCollectGeo | boolean | undefined |
useGoogleMap | boolean | undefined |
googleMapApiKey | string | undefined |
getCurrentPosition | Function | undefined |
WidgetProps Properties
WidgetMap Properties | Type | Default |
---|---|---|
specialties | string[] | undefined | [] |
criteria | string | undefined | '' |
latitude | number | undefined | geoLocation |
longitude | number | undefined | geoLocation |
country | string | undefined | geoLocation |
mapHeight | string | undefined | 150px |
interactive | boolean | undefined | false |
API
getCurrentPosition(success: Function, error?: Function)
- By default, the method
navigator.geolocation.getCurrentPosition
is used to get the current position of the device that is provided by Web APIs - However, this behavior can be changed by providing a getCurrentPosition function through the configuration:
const config = {
...,
getCurrentPosition(success, error) {
success({
longitude : xx.xxx,
latitude: yy.yyy
})
}
}
- You can set user geolocation via
currentPosition
prop. You don't need to usegetCurrentPosition
if already providecurrentPosition
.currentPosition
prop will override the one pass intosuccess
callback.
const [currentPosition, setCurrentPosition] = useState({ lat: 40.6976701, lng: -74.259864 })
<HclSdk config={demoConfig} currentPosition={currentPosition} />
Theming
Provide a className
so you can use any CSS tooling you want. You can use many predefined CSS variables to control SDK component styles. e.g
--hcl-font-default-name: inherit;
--hcl-font-default-size: 14px;
--hcl-font-default-weight: normal;
--hcl-font-title_main_large-name: var(--hcl-font-default-name);
--hcl-font-title_main_large-size: 24px;
--hcl-font-title_main_large-weight: normal;
--hcl-font-title_main-name: var(--hcl-font-default-name);
--hcl-font-title_main-size: 20px;
--hcl-font-title_main-weight: normal;
--hcl-font-title_secondary-name: var(--hcl-font-default-name);
--hcl-font-title_secondary-size: 16px;
--hcl-font-title_secondary-weight: bold;
--hcl-font-search_result_total-name: var(--hcl-font-default-name);
--hcl-font-search_result_total-size: var(--hcl-font-default-size);
--hcl-font-search_result_total-weight: bold;
--hcl-font-search_result_title-name: var(--hcl-font-default-name);
--hcl-font-search_result_title-size: 16px;
--hcl-font-search_result_title-weight: normal;
--hcl-font-result_title-name: var(--hcl-font-default-name);
--hcl-font-result_title-size: var(--hcl-font-default-size);
--hcl-font-result_title-weight: normal;
--hcl-font-result_subtitle-name: var(--hcl-font-default-name);
--hcl-font-result_subtitle-size: var(--hcl-font-default-size);
--hcl-font-result_subtitle-weight: normal;
--hcl-font-profile_title-name: var(--hcl-font-default-name);
--hcl-font-profile_title-size: 18px;
--hcl-font-profile_title-weight: normal;
--hcl-font-profile_subtitle-name: var(--hcl-font-default-name);
--hcl-font-profile_subtitle-size: 16px;
--hcl-font-profile_subtitle-weight: normal;
--hcl-font-profile_title_section-name: var(--hcl-font-default-name);
--hcl-font-profile_title_section-size: 16px;
--hcl-font-profile_title_section-weight: normal;
--hcl-font-card_title-name: var(--hcl-font-default-name);
--hcl-font-card_title-size: 16px;
--hcl-font-card_title-weight: normal;
--hcl-font-modal_title-name: var(--hcl-font-default-name);
--hcl-font-modal_title-size: 20px;
--hcl-font-modal_title-weight: bold;
--hcl-font-search_input-name: var(--hcl-font-default-name);
--hcl-font-search_input-size: 16px;
--hcl-font-search_input-weight: normal;
--hcl-font-sort_criteria-name: var(--hcl-font-default-name);
--hcl-font-sort_criteria-size: 16px;
--hcl-font-sort_criteria-desktop-size: 14px;
--hcl-font-sort_criteria-weight: normal;
--hcl-font-button-name: var(--hcl-font-default-name);
--hcl-font-button-size: var(--hcl-font-default-size);
--hcl-font-button-weight: normal;
--hcl-font-small-name: var(--hcl-font-default-name);
--hcl-font-small-size: 12px;
--hcl-font-small-weight: normal;
--hcl-color-primary: #43b02a;
--hcl-color-secondary: #00a3e0;
--hcl-color-button_bkg: #fcfcfc;
--hcl-color-button_accept_bkg: var(--hcl-color-primary);
--hcl-color-button_discard_bkg: #9aa0a7;
--hcl-color-button_border: #dedede;
--hcl-color-card_border: #dedede;
--hcl-color-marker: #fe8a12;
--hcl-color-marker_selected: #fd8670;
--hcl-color-view_bkg: #f8f9fa;
--hcl-color-list_bkg: var(--hcl-color-view_bkg);
--hcl-color-vote_up: var(--hcl-color-primary);
--hcl-color-vote_down: #ff0000;
--hcl-color-dark: #2b3c4d;
--hcl-color-grey: #a1a1a1;
--hcl-color-grey_dark: #7d7d7d;
--hcl-color-grey_darker: #666666;
--hcl-color-grey_light: #b8b8b8;
--hcl-color-grey_lighter: #ebebeb;
0.1.30
7 months ago
0.1.27
9 months ago
0.1.28
8 months ago
0.1.29
8 months ago
0.1.25
12 months ago
0.1.26
11 months ago
0.1.24
1 year ago
0.1.22
1 year ago
0.1.23
1 year ago
0.1.19
2 years ago
0.1.18
2 years ago
0.1.15
2 years ago
0.1.16
2 years ago
0.1.17
2 years ago
0.1.12
2 years ago
0.1.13
2 years ago
0.1.14
2 years ago
0.1.10
2 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.0.1
3 years ago
0.0.1-rc.1
3 years ago