React · React Native · 16 ಕಾಂಪೊನೆಂಟ್‌ಗಳು

ಕಷ್ಟದ ಇಂಟರಾಕ್ಷನ್‌ಗಳು, ಮುಗಿದಿವೆ.

Animated Chorus ಕೈಯಿಂದ ಸರಿಯಾಗಿ ಮಾಡಲು ಕಷ್ಟವಾದ ಇಂಟರಾಕ್ಷನ್‌ಗಳಿಗಾಗಿ ಮೋಷನ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಸಂಗ್ರಹ: ಉರುಳುವ ಸಂಖ್ಯೆಗಳು, ಸ್ಟ್ರೀಮ್ ಆಗುವ ಪಠ್ಯ, ಗಾತ್ರ ಬದಲಾಗುವ ಅದಲುಬದಲು, ಶೀಟ್‌ಗಳು, ಪೇಜರ್‌ಗಳು, ಸ್ವೈಪ್ ಕ್ರಿಯೆಗಳು ಮತ್ತು ಬದಲಾದುದನ್ನು ಮಾತ್ರ ಅನಿಮೇಟ್ ಮಾಡುವ ಪಟ್ಟಿಗಳು. ಒಂದು tag ಮತ್ತು ನಿಮ್ಮ ಡೇಟಾ. Provider ಇಲ್ಲ, ಸೆಟಪ್ ಇಲ್ಲ.

ಪ್ರಾರಂಭಿಸಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೋಡಿ

ಇನ್‌ಸ್ಟಾಲೇಶನ್

npm install @kkwaenggwari/animated-chorus

ಈ build ನಲ್ಲಿ ಅಳೆಯಲಾಗಿದೆ

Chrome, 2026-09-28. ಪ್ರತಿ ಷರತ್ತು ಮತ್ತು ಮಾದರಿ ಕಾರ್ಯಕ್ಷಮತೆ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿದೆ. ಇದನ್ನು ಹೇಗೆ ಅಳೆಯಲಾಯಿತು

28.0KBಎಲ್ಲ 16 export ಗಳಿಗೆ KB gzip
ಸಂಪೂರ್ಣ ವೆಬ್ ಪ್ರವೇಶ, minify ಮಾಡಲಾಗಿದೆ. React ಮಾತ್ರ peer.
0ಅನಿಮೇಟ್ ಆಗುವಾಗ JS frame callback ಗಳು
ಒಂದು ಸಂಖ್ಯೆ, ಒಂದು ಎತ್ತರ ಮತ್ತು ಒಂದು ಹೈಲೈಟ್ ಒಟ್ಟಿಗೆ ಬದಲಾಗುತ್ತವೆ: ಬ್ರೌಸರ್ ಎಲ್ಲ 12 ಅನಿಮೇಶನ್‌ಗಳನ್ನು ಪ್ಲೇ ಮಾಡುತ್ತದೆ.
1ಪ್ರತಿ ಮೌಲ್ಯ ಬದಲಾವಣೆಗೆ ಒಂದು React commit
MotionNumber ಮೌಲ್ಯ ಬದಲಾದಾಗ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಉರುಳುವಾಗ ಎಂದಿಗೂ ಅಲ್ಲ.
11ಸ್ಟ್ರೀಮ್ ಆದ 3000 ಅಕ್ಷರಗಳಿಗೆ React commit ಗಳು
MotionStream ಅಕ್ಷರಗಳನ್ನು ನೇರವಾಗಿ ಸೇರಿಸಿ, ಸೆಕೆಂಡಿಗೆ ಕೆಲವು ಬಾರಿ React ಗೆ ಸೇರಿಸುತ್ತದೆ.

01ಅತ್ಯಂತ ಸುಲಭ

ಒಂದು tag ಮತ್ತು ನಿಮ್ಮ ಡೇಟಾ

ಪ್ರತಿ ಕಾಂಪೊನೆಂಟ್ ಸ್ವತಂತ್ರವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ: Provider, ಹೊದಿಕೆ ಕಾಂಪೊನೆಂಟ್ ಅಥವಾ ಸೆಟಪ್ ಕಾಲ್ ಇಲ್ಲ. ಸಂಗ್ರಹಗಳು items ಮತ್ತು renderItem ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ, ಮತ್ತು ನಿಮ್ಮ ಲೇಔಟ್, ಪಠ್ಯ ಮತ್ತು ಶೈಲಿಗಳು ನಿಮ್ಮವಾಗಿಯೇ ಉಳಿಯುತ್ತವೆ.

ಒಂದು ಕಾಂಪೊನೆಂಟ್ import ಮಾಡಿ ಮೌಲ್ಯ ಕೊಡಿ. ಅದೇ ಸಂಪೂರ್ಣ ಏಕೀಕರಣ.
ಪಟ್ಟಿಗಳು, ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ಪೇಜರ್‌ಗಳು ನಿಮ್ಮ ಅರೇ ಓದುತ್ತವೆ; key ಡೀಫಾಲ್ಟ್ ಆಗಿ item.id.
ಪಠ್ಯ ನಿಜವಾದ ಪಠ್ಯವಾಗಿಯೇ ಉಳಿಯುತ್ತದೆ: ಸುತ್ತಿಕೊಳ್ಳುತ್ತದೆ, ಫಾಂಟ್‌ನೊಂದಿಗೆ ಅಳತೆ ಬದಲಾಗುತ್ತದೆ ಮತ್ತು ಆಯ್ಕೆ ಮಾಡಬಹುದು.

```
<MotionNumber value={total} />;
```

<MotionSwap value={status}>{label}</MotionSwap>;

<MotionHeight open={open}>{details}</MotionHeight>;

<MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;

<MotionList items={tasks} renderItem={(task) => task.title} />;

```
<ProgressRing value={progress} />;
```

ಆರು ನೇರ ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಮತ್ತು ಪ್ರತಿಯೊಂದರ ಹಿಂದಿನ ಒಂದು ಸಾಲು ಕೋಡ್.

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

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

App.jsx

import { useState } from 'react';
import {
  MotionHighlight,
  MotionNumber,
  MotionSwap,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

const plans = [
  { id: 'starter', label: 'Starter', price: 0, points: ['1 project', 'Community support'] },
  {
    id: 'team',
    label: 'Team',
    price: 24,
    points: ['10 projects', 'Shared workspaces', 'Priority support'],
  },
  {
    id: 'scale',
    label: 'Scale',
    price: 196,
    points: ['Unlimited projects', 'Single sign-on', 'Audit log', 'Dedicated support'],
  },
];

export default function App({ hover = true, effect = 'up', spring = 'default' }) {
  const [plan, setPlan] = useState('team');
  const current = plans.find((item) => item.id === plan);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  return (
    <div className="card">
      <MotionHighlight
        items={plans}
        value={plan}
        onValueChange={setPlan}
        hover={hover}
        transition={transition}
        className="tabs"
        itemClassName="tab"
        highlightClassName="tab-highlight"
        renderItem={(item, { selected }) => (
          <span className={selected ? 'tab-label on' : 'tab-label'}>{item.label}</span>
        )}
      />
      <p className="price">
        <MotionNumber value={current.price} prefix="$" transition={transition} />
        <span className="per">per month</span>
      </p>
      <MotionSwap as="div" inline={false} value={plan} effect={effect} transition={transition}>
        <ul className="points">
          {current.points.map((point) => (
            <li key={point}>{point}</li>
          ))}
        </ul>
      </MotionSwap>
    </div>
  );
}

styles.css

.card {
  display: grid;
  gap: 18px;
  max-width: 420px;
  margin: 24px auto;
  padding: 22px;
  border: 1px solid #cfe8dc;
  border-radius: 18px;
  background: #fff;
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.tab {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.tab-highlight {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.tab-label {
  color: #5b616b;
  transition: color 0.2s;
}

.tab-label.on {
  color: #176b52;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font:
    800 44px/1 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.price .per {
  font-size: 15px;
  font-weight: 500;
  color: #5b616b;
}

.points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4faf7;
  color: #16181d;
}

02ಅತ್ಯಂತ ವೇಗ

ಬ್ರೌಸರ್ ಪ್ಲೇ ಮಾಡುತ್ತದೆ. React ಸ್ಥಿರವಾಗಿರುತ್ತದೆ.

ವೆಬ್‌ನಲ್ಲಿ ಲೋಡ್ ಮಾಡಬೇಕಾದ ಅನಿಮೇಶನ್ ಲೈಬ್ರರಿ ಇಲ್ಲ: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಮೋಷನ್ ಅನ್ನು Web Animations API ಗೆ ಒಪ್ಪಿಸುತ್ತವೆ, ಹೀಗಾಗಿ ಉರುಳುವ ಸಂಖ್ಯೆ ಅಥವಾ ಗಾತ್ರ ಬದಲಾಗುವ ಪ್ಯಾನೆಲ್ ಚಲಿಸುವಾಗ ಪ್ರತಿ ಫ್ರೇಮ್‌ಗೆ JavaScript ಅಥವಾ React ರೆಂಡರ್ ವೆಚ್ಚವಿಲ್ಲ.

12 ಅನಿಮೇಶನ್‌ಗಳು ಒಟ್ಟಿಗೆ ನಡೆಯುವಾಗ 0 JS frame callback ಗಳು.
ಪ್ರತಿ ಮೌಲ್ಯ ಬದಲಾವಣೆಗೆ ಒಂದು React commit, ಪ್ರತಿ ಫ್ರೇಮ್‌ಗೆ ಅಲ್ಲ.
ಸ್ಟ್ರೀಮ್ ಆಗುವ ಪಠ್ಯ: 3000 ಅಕ್ಷರಗಳಿಗೆ 11 React commit ಗಳು. ಕೆಳಗಿನ ಉದಾಹರಣೆ ತನ್ನ ರೆಂಡರ್‌ಗಳನ್ನು ತಾನೇ ಎಣಿಸುತ್ತದೆ.

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

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;
}

03ಅತ್ಯಂತ ಸ್ಥಿರ

ಯಾವುದನ್ನಾದರೂ ಅಡ್ಡಿಪಡಿಸಿ. ಅದು ಎಂದಿಗೂ ಜಿಗಿಯುವುದಿಲ್ಲ.

ಪ್ರತಿ ಹೊಸ ಮೌಲ್ಯ ಪರದೆಯ ಮೇಲಿರುವುದರಿಂದ ಆರಂಭವಾಗುತ್ತದೆ ಮತ್ತು spring ಗಳು ತಮ್ಮ ವೇಗ ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ, ಹೀಗಾಗಿ ವೇಗದ ಕ್ಲಿಕ್‌ಗಳು, ಡೇಟಾ ಸ್ಫೋಟಗಳು ಮತ್ತು ದಿಕ್ಕು ಬದಲಾವಣೆಗಳು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಕಾಣುತ್ತವೆ. ಮೋಷನ್ ಮುಗಿದಾಗ ಯಾವುದೂ ನಡೆಯುತ್ತಿರುವುದಿಲ್ಲ.

ಸಂಖ್ಯೆಗಳು ಎಂದಿಗೂ ಒಡೆಯುವುದಿಲ್ಲ: ಉಳಿದ ಸ್ಥಾನಗಳು ಉರುಳುತ್ತಲೇ ಜಾರುತ್ತವೆ.
5 ms ಅಂತರದಲ್ಲಿ 200 ಹೊಸ ಮೌಲ್ಯಗಳು: ನಂತರ ಉಳಿದ ಅನಿಮೇಶನ್‌ಗಳು 0 ಮತ್ತು ನಿಖರ ಅಂತಿಮ ಪಠ್ಯ.
React StrictMode ನಲ್ಲಿ ಸುರಕ್ಷಿತ. ಹಿನ್ನೆಲೆಯಲ್ಲಿರುವ React Native ಆ್ಯಪ್‌ನಲ್ಲಿ ಮೋಷನ್ ಅಂತಿಮ ಸ್ಥಿತಿಗೆ ನೆಲೆಗೊಳ್ಳುತ್ತದೆ.

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

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

App.jsx

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

const burst = [12, 37, 85, 140, 9, 260, 48, 530, 21, 1100, 75, 2300];

export default function App({ mode = 'roll', direction = 'auto', spring = 'default' }) {
  const [value, setValue] = useState(1280);
  const [changes, setChanges] = useState(0);
  const [bursting, setBursting] = useState(false);

  const change = (next) => {
    setValue(next);
    setChanges((count) => count + 1);
  };

  // Twelve rising values, 90 ms apart, like a live counter: each arrives mid-motion.
  useEffect(() => {
    if (!bursting) return;
    let step = 0;
    const timer = setInterval(() => {
      const delta = burst[step];
      setValue((current) => Math.max(0, current + delta));
      setChanges((count) => count + 1);
      step += 1;
      if (step === burst.length) {
        clearInterval(timer);
        setBursting(false);
      }
    }, 90);
    return () => clearInterval(timer);
  }, [bursting]);

  return (
    <div className="counter">
      <MotionNumber
        className="value"
        value={value}
        intl
        locale="en-US"
        mode={mode}
        direction={direction}
        transition={motionTokens.spring[spring]}
      />
      <p className="changes">{changes} changes, no jumps</p>
      <div className="buttons">
        <button onClick={() => change(Math.max(0, value - 100))}>−100</button>
        <button onClick={() => change(value + 1)}>+1</button>
        <button onClick={() => change(value + 250)}>+250</button>
        <button onClick={() => change(value * 10)}>×10</button>
        <button onClick={() => change(Math.round(value / 10))}>÷10</button>
        <button className="burst" onClick={() => setBursting(true)} disabled={bursting}>
          Burst ×12
        </button>
      </div>
    </div>
  );
}

styles.css

.counter {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 36px 20px 28px;
}

.value {
  font:
    800 clamp(48px, 12vw, 88px)/1.05 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #0e2e24;
}

.changes {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-width: 64px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.buttons button:hover {
  border-color: #176b52;
}

.buttons .burst {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

.buttons .burst:disabled {
  opacity: 0.5;
}

16 ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಅವು ಮಾಡುವ ಕೆಲಸದಂತೆ ಗುಂಪು ಮಾಡಲಾಗಿದೆ

ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಪಠ್ಯ, ಗಾತ್ರ ಬದಲಾಗುವ ವಿಷಯ, ಆಯ್ಕೆ, ಪಟ್ಟಿಗಳು, ಸನ್ನೆಗಳು, ಓವರ್‌ಲೇಗಳು ಮತ್ತು ಪ್ರಗತಿ. ಪ್ರತಿಯೊಂದಕ್ಕೂ ಪಕ್ಕದಲ್ಲಿ props ಇರುವ ನೇರ ವರ್ಕ್‌ಬೆಂಚ್ ಇದೆ.

ಎಲ್ಲ ಕಾಂಪೊನೆಂಟ್‌ಗಳು

ಒಟ್ಟುಗೂಡಿಸಿ

ಅನೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಸಂಪೂರ್ಣ ಪರದೆಗಳು, ಪ್ರತಿಯೊಂದರ ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಉದಾಹರಣೆಯ ಹೊರಗೆ.

ಎಲ್ಲ ಉದಾಹರಣೆಗಳು

ವೆಬ್ ಮತ್ತು React Native ನಲ್ಲಿ ಅದೇ import

Metro ನೇಟಿವ್ ಅನುಷ್ಠಾನವನ್ನು ಮತ್ತು ವೆಬ್ ಬಂಡ್ಲರ್‌ಗಳು DOM ಅನುಷ್ಠಾನವನ್ನು ಆರಿಸುತ್ತವೆ. ಪ್ರತಿ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಮೋಷನ್ ಅನ್ನು ತನಗೆ ಉತ್ತಮವಾದ ರೀತಿಯಲ್ಲಿ ಪ್ಲೇ ಮಾಡುತ್ತದೆ.

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

ಭಾಗ	ವೆಬ್	React Native
Transform ಮತ್ತು opacity	Web Animations API, spring ಗಳನ್ನು ವಿಶ್ಲೇಷಣಾತ್ಮಕವಾಗಿ ಮಾದರಿ ಮಾಡಲಾಗುತ್ತದೆ	ನೇಟಿವ್ driver ನೊಂದಿಗೆ `Animated`
ಅಗಲ ಮತ್ತು ಎತ್ತರ	Web Animations API	JS driver ನೊಂದಿಗೆ `Animated`, ಏಕೆಂದರೆ ಇದು ಲೇಔಟ್
ಸ್ಟ್ರೀಮ್ ಆಗುವ ಪಠ್ಯ	ಅಕ್ಷರಗಳು ಸೇರಿ ಮಸುಕಾಗಿ ಕಾಣುತ್ತವೆ; ಸೆಕೆಂಡಿಗೆ ಕೆಲವು React ರೆಂಡರ್‌ಗಳು	ನಿಜವಾದ `Text`, ಮಸುಕಿಲ್ಲದೆ ಕಾಣುತ್ತದೆ
ಶೀಟ್‌ಗಳು ಮತ್ತು ಜೂಮ್	ಮೇಲಿನ ಪದರದಲ್ಲಿ ನೇಟಿವ್ `dialog`	ಪಾರದರ್ಶಕ `Modal`; ಹಿಂದಿನ ಬಟನ್ ಅದನ್ನು ಮುಚ್ಚುತ್ತದೆ

ಎರಡು ನಿಮಿಷಗಳಲ್ಲಿ ಪ್ರಾರಂಭಿಸಿ

ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ, ಒಂದು ಕಾಂಪೊನೆಂಟ್ import ಮಾಡಿ, ಮೌಲ್ಯ ಕೊಡಿ.

npm install @kkwaenggwari/animated-chorus

ಕಷ್ಟದ ಇಂಟರಾಕ್ಷನ್‌ಗಳು, ಮುಗಿದಿವೆ.

ಈ build ನಲ್ಲಿ ಅಳೆಯಲಾಗಿದೆ

ಒಂದು tag ಮತ್ತು ನಿಮ್ಮ ಡೇಟಾ

ಬ್ರೌಸರ್ ಪ್ಲೇ ಮಾಡುತ್ತದೆ. React ಸ್ಥಿರವಾಗಿರುತ್ತದೆ.

ಯಾವುದನ್ನಾದರೂ ಅಡ್ಡಿಪಡಿಸಿ. ಅದು ಎಂದಿಗೂ ಜಿಗಿಯುವುದಿಲ್ಲ.

16 ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಅವು ಮಾಡುವ ಕೆಲಸದಂತೆ ಗುಂಪು ಮಾಡಲಾಗಿದೆ

ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಪಠ್ಯ

ವಿಷಯ ಮತ್ತು ಗಾತ್ರ

ಆಯ್ಕೆ ಮತ್ತು ಪುಟ ತಿರುವು

ಪಟ್ಟಿಗಳು

ಸನ್ನೆಗಳು

ಓವರ್‌ಲೇಗಳು

ಪ್ರಗತಿ

ಒಟ್ಟುಗೂಡಿಸಿ

ವೆಬ್ ಮತ್ತು React Native ನಲ್ಲಿ ಅದೇ import

ಎರಡು ನಿಮಿಷಗಳಲ್ಲಿ ಪ್ರಾರಂಭಿಸಿ

ಹುಡುಕಿ