@mertcankocak/ui

Kişisel kullanım için React + TypeScript UI bileşen paketi. Şimdilik sadece Dropdown wrapper içerir.

Kurulum

bash

npm i @mertcankocak/ui





Kullanım

tsx

import * as React from "react";

import {

  Dropdown,

  MultiSelect,

  type DropdownOption,

  type MultiSelectOption,

} from "@scarfe/ui";



const options: DropdownOption[] = [

  { label: "Türkiye", value: "TR" },

  { label: "Almanya", value: "DE" },

];



export function Example() {

  const [country, setCountry] = React.useState("");

  const [countries, setCountries] = React.useState([]);



  const multiOptions: MultiSelectOption[] = [

    { label: "İstanbul", value: "istanbul" },

    { label: "Ankara", value: "ankara" },

    { label: "İzmir", value: "izmir" },

  ];



  return (

    <>

              options={options}

        value={country}

        onValueChange={setCountry}

        placeholder="Ülke seç"

        aria-label="Country"

      />



              options={multiOptions}

        values={countries}

        onValuesChange={setCountries}

        aria-label="Cities"

        size={3}

      />

    

  );

}





Formik + MUI örneği (FormikTextField)

FormikTextField

 kullanmak için consumer projende şunlar kurulu olmalı:

formik, @mui/material, @emotion/react, @emotion/styled, lodash.debounce

tsx

import { Formik, Form } from "formik";

import { FormikTextField } from "@scarfe/ui";



export function ExampleFormik() {

  return (

     {}}>

      

                  name="city"

          label="City"

          fieldToSearch="city"

          onSuggestionSearch={async (_field, term) => {

            return ["Istanbul", "Ankara", "Izmir"].filter((x) =>

              x.toLowerCase().includes(term.toLowerCase())

            );

          }}

        />

      

    

  );

}





Formik + MUI örneği (FormikDropdown)

tsx

import { Formik, Form } from "formik";

import { FormikDropdown } from "@scarfe/ui";



export function ExampleDropdown() {

  return (

     {}}>

      

                  name="country"

          label="Country"

          placeholder="Seçiniz"

          options={[

            { label: "Türkiye", value: "TR" },

            { label: "Almanya", value: "DE" },

          ]}

        />

      

    

  );

}





Build

bash

npm run build





Yayınlama (tamamen ücretsiz)



NPM'e public paket yayınlamak ücretsizdir.



1. İsim çakışmaması için

package.json içindeki "name"

 alanını kendine göre değiştir.

2. NPM hesabınla giriş yap:

bash

npm login





3. Public yayınla:

bash

npm publish --access public