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