Skip to content

Commit

Permalink
add react component in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
uvarov-frontend committed Sep 16, 2023
1 parent 9cfb844 commit bac8193
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 0 deletions.
64 changes: 64 additions & 0 deletions docs/en/learn/additional-features/react-component.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# React component

<Info>
If you don't use TypeScript, use the .jsx extension instead of .tsx and get rid of the component typing.
</Info>

Create a react component named `VanillaCalendar.tsx` and copy the below code into this file.

```js
import { HTMLAttributes, useEffect, useRef, useState } from "react";
import VC, { Options } from "@uvarov.frontend/vanilla-calendar";
import "@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css";
import "@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css";
import "@uvarov.frontend/vanilla-calendar/build/themes/light.min.css";

interface VanillaCalendarProps extends HTMLAttributes<HTMLDivElement> {
config?: Options,
}

function VanillaCalendar({ config, ...attributes }: VanillaCalendarProps) {
const ref = useRef<HTMLDivElement>(null);
const [calendar, setCalendar] = useState<VC<HTMLDivElement, Options> | null>(null);

useEffect(() => {
if (!ref.current) return
setCalendar(new VC(ref.current, config));
}, [ref, config])

useEffect(() => {
if (!calendar) return;
calendar.init();
}, [calendar]);

return (
<div {...attributes} ref={ref}></div>
)
}

export default VanillaCalendar
```

Then import the created component into the react component where you plan to display the calendar.

```js
import VanillaCalendar from "./VanillaCalendar";
```

Use the created component.

```js
// ...
<VanillaCalendar />
// ...
```

The `VanillaCalendar` component can be passed any HTML attributes that the `<div>` tag supports, as well as `config` to configure the calendar.

```js
// ...
<VanillaCalendar config={{
type: 'multiple',
}} className="thisIsMyClass" />
// ...
```
64 changes: 64 additions & 0 deletions docs/ru/learn/additional-features/react-component.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
# React компонент

<Info>
Если вы не используете TypeScript, используйте расширение .jsx вместо .tsx и избавьтесь от типизации компонента.
</Info>

Создайте react компонент с именем `VanillaCalendar.tsx` и скопируйте приведенный ниже код в этот файл.

```js
import { HTMLAttributes, useEffect, useRef, useState } from "react";
import VC, { Options } from "@uvarov.frontend/vanilla-calendar";
import "@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css";
import "@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css";
import "@uvarov.frontend/vanilla-calendar/build/themes/light.min.css";

interface VanillaCalendarProps extends HTMLAttributes<HTMLDivElement> {
config?: Options,
}

function VanillaCalendar({ config, ...attributes }: VanillaCalendarProps) {
const ref = useRef<HTMLDivElement>(null);
const [calendar, setCalendar] = useState<VC<HTMLDivElement, Options> | null>(null);

useEffect(() => {
if (!ref.current) return
setCalendar(new VC(ref.current, config));
}, [ref, config])

useEffect(() => {
if (!calendar) return;
calendar.init();
}, [calendar]);

return (
<div {...attributes} ref={ref}></div>
)
}

export default VanillaCalendar
```

Затем импортируйте созданный компонент в компонент react, где вы планируете отображать календарь.

```js
import VanillaCalendar from "./VanillaCalendar";
```

Используйте созданый компонент.

```js
// ...
<VanillaCalendar />
// ...
```

В компонент `VanillaCalendar` можно передать любые атрибуты HTML, которые поддерживает тег `<div>`, а также `config` для настройки календаря.

```js
// ...
<VanillaCalendar config={{
type: 'multiple',
}} className="thisIsMyClass" />
// ...
```

0 comments on commit bac8193

Please sign in to comment.