MotionStream

ಸ್ಫೋಟಗಳನ್ನು ಹಿಡಿಯುವ ಸ್ಥಿರ ವೇಗದಲ್ಲಿ ತೆರೆದುಕೊಳ್ಳುವ ಸ್ಟ್ರೀಮ್ ಪಠ್ಯ.

ವೆಬ್React Nativeಸಂಖ್ಯೆಗಳು ಮತ್ತು ಪಠ್ಯ

ಪ್ರಯತ್ನಿಸಿ

ಉದಾಹರಣೆ ಸಿದ್ಧವಾಗುತ್ತಿದೆ…

JavaScript ಆಫ್ ಆಗಿದೆ. ಕೆಳಗಿನ ಕೋಡ್ ಪೂರ್ಣ ಉದಾಹರಣೆ.

App.jsx

import { useEffect, useRef, useState } from 'react';
import { MotionStream } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const answer =
  'Motion helps people follow change. When a total updates, a rolling number shows which way it moved. ' +
  'When a panel opens, the height that follows its content keeps the reader in place. ' +
  'When an answer arrives in bursts, a steady reveal turns the bursts into reading: nothing waits for the ' +
  'next packet, and nothing is dumped at once. The pace speeds up only when a backlog builds, so the text ' +
  'never falls far behind what the server has already sent.';

// Network-like bursts: long pauses, then a lot of text at once.
const pauses = [300, 1100, 250, 1500, 400, 900];

export default function App({ speed = 90, catchUp = 900, chunk = 160, effect = 'fade' }) {
  const [received, setReceived] = useState(0);
  const [chunks, setChunks] = useState(0);
  const renders = useRef(0);
  renders.current += 1;

  useEffect(() => {
    if (received >= answer.length) return;
    const timer = setTimeout(
      () => {
        setReceived((current) => Math.min(answer.length, current + chunk));
        setChunks((count) => count + 1);
      },
      pauses[chunks % pauses.length],
    );
    return () => clearTimeout(timer);
  }, [received, chunks, chunk]);

  const askAgain = () => {
    setReceived(0);
    setChunks(0);
  };

  return (
    <div className="chat">
      <p className="question">Why does motion help an interface?</p>
      <p className="answer">
        <MotionStream
          text={answer.slice(0, received)}
          speed={speed}
          catchUp={catchUp}
          effect={effect}
        />
      </p>
      <footer>
        <output>
          {chunks} chunks · App rendered {renders.current} times
        </output>
        <button onClick={askAgain}>Ask again</button>
      </footer>
    </div>
  );
}

styles.css

.chat {
  display: grid;
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px;
}

.question {
  justify-self: end;
  max-width: 80%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  background: #176b52;
  color: #fff;
}

.answer {
  min-height: 180px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #cfe8dc;
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  color: #16181d;
  line-height: 1.65;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

output {
  font:
    600 13px ui-monospace,
    Consolas,
    monospace;
  color: #176b52;
}

footer button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

ಅತಿ ಚಿಕ್ಕ ಬಳಕೆ

Answer.jsx

<MotionStream text={answerSoFar} initial />

<MotionStream text={answerSoFar}>
  {visible => <Markdown>{visible}</Markdown>}
</MotionStream>

ಇದು ನಿಮಗಾಗಿ ನಿರ್ವಹಿಸುವುದು

ಸ್ಫೋಟಗಳು ಓದಬಲ್ಲವಾಗುತ್ತವೆ: ಪಠ್ಯ ತುಂಡುಗಳಾಗಿ ಅಲ್ಲ, ಸೆಕೆಂಡಿಗೆ speed ಅಕ್ಷರಗಳಲ್ಲಿ ತೆರೆದುಕೊಳ್ಳುತ್ತದೆ.
ಬಾಕಿ ಇದ್ದರೆ ತೆರೆದುಕೊಳ್ಳುವಿಕೆ ವೇಗಗೊಂಡು ಸುಮಾರು catchUp ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ.
Emoji, ಧ್ವಜಗಳು ಮತ್ತು ಸಂಯೋಜಕ ಚಿಹ್ನೆಗಳು ಎಂದಿಗೂ ಒಡೆಯುವುದಿಲ್ಲ, ಮತ್ತು ಅರ್ಧ ಬಂದ emoji ಉಳಿದುದಕ್ಕಾಗಿ ಕಾಯುತ್ತದೆ.
ಮತ್ತೆ ಬರೆದ ಉತ್ತರ ಮತ್ತೆ ಆರಂಭವಾಗದೆ ಹಂಚಿಕೊಂಡ ಆರಂಭದಿಂದ ಮುಂದುವರಿಯುತ್ತದೆ.
ತೆರೆದ ಅಕ್ಷರಗಳು ನೇರವಾಗಿ ಪುಟಕ್ಕೆ ಹೋಗುತ್ತವೆ; React ಸೆಕೆಂಡಿಗೆ ಕೆಲವೇ ಬಾರಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಇದಕ್ಕೆ ಬಳಸಿ

ಚಾಟ್‌ನಲ್ಲಿ ಸಹಾಯಕನ ಉತ್ತರ.
build ಅಥವಾ deploy ಲಾಗ್.
ನೇರ ಉಪಶೀರ್ಷಿಕೆಗಳು.

Props

Prop	ಟೈಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`text`	`string`	`—`ಕಡ್ಡಾಯ	ಇಲ್ಲಿಯವರೆಗಿನ ಪಠ್ಯ. ಬೆಳೆಯುವ ಪಠ್ಯ ಸ್ಥಿರ ವೇಗದಲ್ಲಿ ತೆರೆದುಕೊಳ್ಳುತ್ತದೆ; ಮರುಬರಹ ಹಂಚಿಕೊಂಡ ಆರಂಭದಿಂದ ಮುಂದುವರಿಯುತ್ತದೆ.
`speed`	`number`	`90`	ಸೆಕೆಂಡಿಗೆ ಅಕ್ಷರಗಳಲ್ಲಿ ಮೂಲ ತೆರೆದುಕೊಳ್ಳುವ ದರ.
`catchUp`	`number`	`900`	ಬಾಕಿ ವೇಗಗೊಂಡು ಸುಮಾರು ಇಷ್ಟು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ತೆರೆದುಕೊಳ್ಳುತ್ತದೆ.
`initial`	`boolean`	`false`	ಮೌಂಟ್‌ನಲ್ಲಿರುವ ಪಠ್ಯವನ್ನೂ ತೆರೆಯಿರಿ (ಇಲ್ಲದಿದ್ದರೆ ಅದು ತಕ್ಷಣ ಕಾಣುತ್ತದೆ).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` ಹೊಸ ಅಕ್ಷರಗಳನ್ನು ಮಸುಕಾಗಿ ತರುತ್ತದೆ; `none` ಅವನ್ನು ನೇರವಾಗಿ ತೋರಿಸುತ್ತದೆ.
`children`	`(visible: string) => ReactNode`		ವೇಗ ನಿಯಂತ್ರಿತ ಪಠ್ಯ ಪಡೆಯುವ ಫಂಕ್ಷನ್, ಉದಾಹರಣೆಗೆ Markdown ರೆಂಡರ್ ಮಾಡಲು.
`as`	`element`	`'span'`	ರೆಂಡರ್ ಮಾಡಬೇಕಾದ ಎಲಿಮೆಂಟ್.
`onMotionComplete`	`(text) => void`		ತೆರೆದುಕೊಳ್ಳುವಿಕೆ `text` ಅನ್ನು ತಲುಪಿದಾಗಲೆಲ್ಲ ನಡೆಯುತ್ತದೆ.

ಇತರ props ರೆಂಡರ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಹೋಗುತ್ತವೆ, ಹೀಗಾಗಿ className, style ಮತ್ತು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಎಂದಿನಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ವೆಬ್ ಮತ್ತು React Native

ವೆಬ್‌ನಲ್ಲಿ ಹೊಸ ಅಕ್ಷರಗಳು ಮಸುಕಾಗಿ ಬಂದು (effect="fade") ಸಾಮಾನ್ಯ, ಆಯ್ಕೆ ಮಾಡಬಹುದಾದ ಪಠ್ಯಕ್ಕೆ ಸೇರುತ್ತವೆ. ಫಂಕ್ಷನ್ ಚೈಲ್ಡ್ Markdown ಗಾಗಿ ವೇಗ ನಿಯಂತ್ರಿತ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಹೆಚ್ಚೆಂದರೆ ಎರಡು ಫ್ರೇಮ್‌ಗೊಮ್ಮೆ ಪಡೆಯುತ್ತದೆ. ಮರೆಯಾದ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಎಲ್ಲವೂ ತಕ್ಷಣ ಕಾಣುತ್ತದೆ.

React Native ನಲ್ಲಿ ಪಠ್ಯ ನಿಜವಾದ Text ಮತ್ತು ಮಸುಕಿಲ್ಲದೆ ಕಾಣುತ್ತದೆ.

ಈ ಉದಾಹರಣೆಗಳಲ್ಲಿ ಬಳಸಲಾಗಿದೆ

ಚಾಟ್ ಉತ್ತರಮಡಚಿ ಮರೆಯಾಗುವ ಸಲಹೆಗಳು, ಸ್ಥಿರ ವೇಗದಲ್ಲಿ ಸ್ಟ್ರೀಮ್ ಆಗುವ ಉತ್ತರ ಮತ್ತು ಬದಲಾಗುವ ಸ್ಥಿತಿ ಸಾಲು.MotionStreamMotionListMotionSwapMotionHeight