தொடங்குதல்

Zephora UI, scoped தொகுப்புகளாக வழங்கப்படுகிறது. React தொகுப்பையும் தீம் இயந்திரத்தையும் நிறுவுங்கள், அடிப்படை stylesheet-ஐ ஒரு முறை இறக்குமதி செய்து, இணைத்து உருவாக்குங்கள்.

நிறுவல்

npm install @zephora/react @zephora/theme @zephora/tokens
# React Native
npm install @zephora/native @zephora/theme @zephora/tokens

பயன்பாடு

import "@zephora/react/styles.css";
import { Button, Card, CardBody, Input } from "@zephora/react";
import { ThemeProvider, darkTheme } from "@zephora/theme";

export default function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Card>
        <CardBody>
          <Input placeholder="Email" />
          <Button>Save</Button>
        </CardBody>
      </Card>
    </ThemeProvider>
  );
}

React Native

import { ZephoraProvider, Button } from "@zephora/native";
import { darkTheme } from "@zephora/theme";

export default function App() {
  return (
    <ZephoraProvider theme={darkTheme}>
      <Button onPress={() => {}}>Save</Button>
    </ZephoraProvider>
  );
}

Tree shaking

ஒவ்வொரு தொகுப்பும் ESM-முதல் மற்றும் sideEffects CSS-க்கு மட்டுமே வரம்பிடப்பட்டுள்ளது. நீங்கள் பயன்படுத்துவதை மட்டும் இறக்குமதி செய்யுங்கள்; பண்ட்லர்கள் மற்றதை நீக்கிவிடும். காம்பொனென்ட் ஒன்றுக்கான gzip வரவுசெலவு (~5KB) CI-இல் size-limit மூலம் கட்டாயமாக்கப்படுகிறது.