3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-30 15:00:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(core): replace useDocusaurusContext().isClient by useIsBrowser() (#5349)

Browse source 
* extract separate useIsClient() hook

* for consistency, rename to `useIsBrowser`

* useless return

* improve doc for BrowserOnly

* update snapshot

* polish
This commit is contained in:
Sébastien Lorber 2021-08-12 19:02:29 +02:00 • committed by GitHub
parent 69b11a8546
commit 295e77cc09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 213 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/docusaurus-theme-common/src/components/Details/index.tsx
View file

@ -6,7 +6,7 @@
*/
import React, {ComponentProps, ReactElement, useRef, useState} from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useIsBrowser from '@docusaurus/useIsBrowser';
import clsx from 'clsx';
import {useCollapsible, Collapsible} from '../Collapsible';
import styles from './styles.module.css';
@ -30,7 +30,7 @@ export type DetailsProps = {
} & ComponentProps<'details'>;
const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
const {isClient} = useDocusaurusContext();
const isBrowser = useIsBrowser();
const detailsRef = useRef<HTMLDetailsElement>(null);
const {collapsed, setCollapsed} = useCollapsible({
@ -48,7 +48,7 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
data-collapsed={collapsed}
className={clsx(
styles.details,
{[styles.isClient]: isClient},
{[styles.isBrowser]: isBrowser},
props.className,
)}>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}

4
packages/docusaurus-theme-common/src/components/Details/styles.module.css
View file

@ -46,9 +46,9 @@ CSS variables, meant to be overriden by final theme
}
/* When JS disabled/failed to load: we use the open property for arrow animation: */
.details[open]:not(.isClient) > summary:before,
.details[open]:not(.isBrowser) > summary:before,
/* When JS works: we use the data-attribute for arrow animation */
.details[data-collapsed='false'].isClient > summary:before {
.details[data-collapsed='false'].isBrowser > summary:before {
transform: rotate(90deg);
}

6
packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx
View file

@ -14,7 +14,7 @@ import React, {
useContext,
createContext,
} from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useIsBrowser from '@docusaurus/useIsBrowser';
import {createStorageSlot} from './storageUtils';
import {useThemeConfig} from './useThemeConfig';
@ -39,10 +39,10 @@ type AnnouncementBarAPI = {
const useAnnouncementBarContextValue = (): AnnouncementBarAPI => {
const {announcementBar} = useThemeConfig();
const {isClient} = useDocusaurusContext();
const isBrowser = useIsBrowser();
const [isClosed, setClosed] = useState(() => {
return isClient
return isBrowser
? // On client navigation: init with localstorage value
isDismissedInStorage()
: // On server/hydration: always visible to prevent layout shifts (will be hidden with css if needed)