docs: modify demo

sheinsight · Jun 18, 2024 · c2a37ed · c2a37ed
1 parent 8184d68
commit c2a37ed
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/src/use-date-format/demo.tsx b/src/use-date-format/demo.tsx
@@ -3,25 +3,25 @@ import { useControlledComponent, useDateFormat, useNow } from '@shined/react-use
 
 export function App() {
   const now = useNow()
-  const data = useDateFormat(now, 'YYYY-MM-DD • YYYY/MM/DD • YYYY.M.D • YYYY 年 M 月 D 日')
+  const data = useDateFormat(now, 'YYYY-MM-DD • YYYY/MM/DD • YYYY.M.D • YYYY MMMM D, YYYY')
   const time = useDateFormat(now, 'HH:mm:ss • hh:mm:ss • H:m:s • h:m:s')
-
-  const input = useControlledComponent('今天是 YYYY 年 M 月 D 日，dddd，现在是AA h 点 m 分 s 秒 SSS 毫秒。')
+  const input = useControlledComponent("[Today is] M/D/YYYY, ddd, [now is] A H [o'clock] m [min] s [sec] SSS [ms]")
 
   const playground = useDateFormat(now, input.value, {
-    locales: 'zh-CN',
-    customMeridiem: (hours: number) => (hours < 12 ? '上午' : '下午'),
+    locales: 'en-US',
+    customMeridiem: (hours: number) => (hours < 12 ? 'A.M.' : 'P.M.'),
   })
 
   return (
     <Card>
       <Zone border="primary" row={false}>
-        <KeyValue label="Formatted Date" value={data} />
-        <KeyValue label="Formatted Time" value={time} />
+        <KeyValue label="Date" value={data} />
+        <KeyValue label="Time" value={time} />
       </Zone>
       <Zone border="primary" row={false}>
-        <KeyValue label="Formatted Result" value={playground} />
-        <LabelInput label="Format Template" className="flex-1" placeholder="Format Template" {...input.props} />
+        <KeyValue label="Render Result" value={playground} />
+        {/* Offers a flexible input for custom date-time formatting */}
+        <LabelInput label="Template" className="flex-1" placeholder="Template" {...input.props} />
       </Zone>
     </Card>
   )

diff --git a/src/use-date-format/format-date.ts b/src/use-date-format/format-date.ts
@@ -4,6 +4,7 @@ import { isString } from '../utils/basic'
 
 const REGEX_PARSE =
   /* #__PURE__ */ /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/
+
 const REGEX_FORMAT =
   /* #__PURE__ */ /[YMDHhms]o|\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|SSS/g
 

diff --git a/src/use-date-format/index.mdx b/src/use-date-format/index.mdx
@@ -4,11 +4,11 @@ import { HooksType } from '@/components'
 
 <HooksType category="Utilities" />
 
-A React Hook that returns a formatted date string, like `dayjs().format()`, but not depend on any library.
+A dependency-free React Hook delivering formatted date strings, similar to the `format` function found in libraries such as `dayjs`, `momentjs`, or `date-fns`.
 
 ## Demo
 
-Try to edit the fotmat template below and see the result.
+Try to edit the format template below and see the result.
 
 import { App } from './demo'