Skip to main content

Your Custom UI Elements

Use this guide to integrate Doctor App SDK functionality into your app's native UI. Create responsive, accessible, and theme-ready components that align with your product design and user experience standards.

Component Structure and Usage​

Develop each UI element as a self-contained, reusable component. Use clear naming conventions and separate structure, logic, and styling.

note

Modular components are easier to maintain, test, and extend. Keep props concise and well-documented.

Example: Appointment Card​

import { formatDate } from 'utils/formatters';

export default function AppointmentCard({ appointment, onPress }) {
  return (
    <div className="appointment-card" role="button" tabIndex={0} onClick={onPress}>
      <h3>{appointment.doctorName}</h3>
      <p>{formatDate(appointment.date)}</p>
      <p>{appointment.status}</p>
    </div>
  );
}

Props:

  • appointment: Appointment object from the SDK.
  • onPress: Callback triggered on selection.

Accessibility and Responsiveness​

Follow accessibility guidelines:

  • Use ARIA roles.
  • Support keyboard navigation.
  • Ensure sufficient color contrast.

Design responsive layouts:

  • Use flex containers.
  • Apply media queries to adjust based on screen size.
.appointment-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .appointment-card {
    flex-direction: row;
    justify-content: space-between;
  }
}

Accessible and responsive design ensures a consistent experience across devices and user types.

Theming and Customization​

Support light and dark modes using CSS variables:

:root {
  --text-color: #1a1a1a;
  --bg-color: #ffffff;
}

[data-theme='dark'] {
  --text-color: #f0f0f0;
  --bg-color: #1a1a1a;
}

.appointment-card {
  color: var(--text-color);
  background-color: var(--bg-color);
}

Allow overrides via className or style props for flexibility.

Integration with the SDK​

Use the SDK’s built-in hooks to populate components with dynamic data and react to lifecycle events.

import { useAppointment } from 'dr-sdk';

function AppointmentCardWrapper({ id }) {
  const { appointment, loading } = useAppointment(id);

  if (loading) return <Spinner />;
  return <AppointmentCard appointment={appointment} onPress={() => openDetails(id)} />;
}

Integrating SDK data ensures your UI reflects real-time states and platform logic.

Performance Optimization​

Improve load times and responsiveness:

  • Use React.memo for static props.
  • Load non-critical components lazily.
  • Memoize computed values.
const AppointmentCard = React.lazy(() => import('./AppointmentCard'));

These patterns reduce bundle size and unnecessary re-renders.

Complete Example​

import { useAppointment } from 'dr-sdk';

function AppointmentPreview({ id }) {
  const { appointment } = useAppointment(id);

  return (
    <AppointmentCard
      appointment={appointment}
      onPress={() => console.log('Selected:', appointment.id)}
    />
  );
}