react-day-picker/website/docs/development/architecture.mdx

Customizable Date Picker for React

---
draft: true
---

# Architecture

:::info Draft

This documentation is still a work in progress. If you have any questions, ask to the [discussions](https://github.com/gpbl/react-day-picker/discussions) page on Github.

:::

## General Design

### Date Library

## HTML Structure

### Styles

## Components

### Custom Components

## Hooks

## Contexts

## Performance Concerns

## Accessibility Concerns

## Builds and Continuous Integration

## Examples

In the `examples` directory (included in the package) you can find a comprehensive list of examples implementing DayPicker in its various configurations.
Examples are mostly used in the website to show code snippets and its preview, handy for developers to quickly implement DayPicker in their code.

Each example consists in a React component exporting a small application using DayPicker.

```tsx fileName="ExampleName.tsx"
export function ExampleName() [
  return <DayPicker {...props} />;
]
```

We use the examples also for the integration tests and to manually test the library during development.

## Documentation

The documentation is found in the `docs` directory as markdown files.

The markdowns are parsed by the `parse-docs` script to identify code blocks that should be replaced by the source of an example.

````
```tsx example fileName="ExampleName.tsx"
export function ExampleName() [
  return <DayPicker {...props} />;
]
```
````

## Testing