---
title: "Хук useBlokReady — готовность редакторов в области"
description: "Дождитесь, пока редакторы Blok внутри одного контейнера отрисуются, с помощью useBlokReady: с областью видимости, реактивно и безопасно для пустых списков."
source: https://blokeditor.com/ru/docs/use-blok-ready/
lastmod: 2026-09-08
---

Фреймворк JavaScript

Адаптеры фреймворков useBlokReady

На этой странице useBlokReady(options?)

# useBlokReady(): готовность редакторов в области

Живая готовность редакторов Blok внутри поддерева DOM в виде булева значения, от которого можно рендерить. Используйте хук useBlokReady(options) в @bloklabs/react, composable useBlokReady(options) в @bloklabs/vue, который возвращает ref, или injectBlokReady(options) в @bloklabs/angular, который возвращает signal.

Все три обёртки используют один и тот же реестр ядра за Blok.readyState() и Blok.subscribeReady(), поэтому разойтись не могут. Они отвечают на вопрос, который на самом деле важен списку комментариев или форме: готовы ли МОИ редакторы?

Ограничьте область тем ref, который у вас уже есть на контейнере. Тогда посторонний редактор на странице не сможет держать проверку закрытой.

Это живой сигнал, а не одноразовая защёлка.

- Редактор, смонтированный позже, снова закрывает проверку, а с settleOn: 'rendered' её закрывает и каждый повторный рендер при смене data.
- Область без редакторов считается готовой, поэтому пустой список не требует отдельной ветки.
- Значение начинается с false и впервые читается по-настоящему, когда элемент области примонтирован (React: эффект монтирования, Vue: onMounted, Angular: afterNextRender).
- Запрошенная, но ещё не разрешённая область даёт false, а не молчаливый откат ко всей странице.

Лишнее ожидание безопасно. Недостаточное ожидание является ошибкой.

Обновлено 8 сент. 2026 г. [Редактировать на GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/api-data.ts)

### Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

TypeScript

```
// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');
```

## Методы

### useBlokReady(options?)

boolean

True, когда каждый редактор Blok в заданной области достиг готовности. Значение пересчитывается при каждом изменении готовности (создание, загрузка, смена состояния рендера, уничтожение) и отписывается при размонтировании.

Параметры

| Параметр | Тип | Обязательный | По умолчанию | Описание |
| --- | --- | --- | --- | --- |
| `options.within` | `RefObject<Element | null> | Element | null` | — | — | Ограничить ожидание редакторами, смонтированными внутри этого элемента. Ref перечитывается при каждом изменении готовности, поэтому тот, что подключается после первого рендера, будет учтён. Опустите его, чтобы наблюдать за всеми редакторами на странице. |
| `options.settleOn` | `'ready' | 'rendered'` | — | `'ready'` | 'ready' достигается, когда каждый редактор завершил загрузку. 'rendered' дополнительно ждёт, пока его содержимое окажется в DOM, и это ожидание взводится заново при каждом повторном рендере после загрузки. |

TypeScript

```
const ready = useBlokReady({ within: listRef, settleOn: 'rendered' });
```

TypeScript

```
import { useRef } from 'react';
import { BlokEditor, useBlokReady } from '@bloklabs/react';

export function Comments({ comments }) {
  const listRef = useRef<HTMLDivElement>(null);

  // True once every editor inside listRef has its content in the DOM.
  // Re-arms whenever a comment's data changes and it re-renders.
  const ready = useBlokReady({ within: listRef, settleOn: 'rendered' });

  return (
    <>
      <div ref={listRef}>
        {comments.map((c) => (
          <BlokEditor key={c.id} data={c.body} readOnly />
        ))}
      </div>
      {!ready && <Skeleton />}
      <Composer autoFocus={ready} />
    </>
  );
}

// Vue — a ref:
// const list = ref<HTMLElement | null>(null);
// const ready = useBlokReady({ within: list, settleOn: 'rendered' });

// Angular — a signal, from an injection context:
// @ViewChild('list', { static: true }) listRef!: ElementRef<HTMLElement>;
// readonly ready = injectBlokReady({
//   within: () => this.listRef?.nativeElement ?? null,
//   settleOn: 'rendered',
// });
```