https://github.com/90pixel/todo-ts
https://github.com/90pixel/todo-ts
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/90pixel/todo-ts
- Owner: 90pixel
- Created: 2022-03-16T15:31:52.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-25T15:17:30.000Z (about 4 years ago)
- Last Synced: 2025-01-16T23:43:58.489Z (over 1 year ago)
- Language: TypeScript
- Size: 136 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Tasklar
- Hakan -> Typography
- Aydoğan -> ListItem
- Baran -> Button
- Burak -> Drag/Drop component
- Yasin -> Textarea
- Erhan -> Modal
### DndComponent:
Basit yapıdaki sürükle-bırak sıralama işlemlerini yapabileceğimiz, tekrar kullanılabilir yapıda tasarlanmış DndComponenti.
- Kullanmak için components içerisinde DndComponent'i import etmemiz yeterli. Örn
```js
import { DndComponent } from 'components';
```
- Componentin aldığı proplar:
- data => Componentin render edeceği elementleri gönderdiğimiz array. Bu array içerisinde `id` ve `item` değerleri bulunduran objeler bulundurur.
- onDragEnd => Sürükle bırak işlemi çalıştığı zaman bir event tetiklemek istersek, bu prop ile bunu gerçekleştirebiliriz. Parametre olarak güncellenmiş data arrayini döner.
- customDragIcon => Eğer default olan sürükle iconunu değiştirmek istersek, bu parametre sayesinde istediğimiz react elementini render edebiliriz.
⚠️NOTE: `id` keyini değeri string olmak zorundadır. Çünkü bu key, sort işlemlerinde sürüklediğimiz ve bıraktığımız elementlerde kullanılır. `@dnd-kit` bu değerin string olmasını istediği için bu şekilde bir yapı kuruldu.
Kullanım Örneği:
```js
import { DndComponent } from 'components';
const Home = () => {
const items = [
{ id: '1', item: 'Dnd Componenti' },
{ id: '2', item:
Deneme 1
},
{ id: '3', item: },
{ id: '4', item: 1234 },
{ id: '5', item: 123213
},
];
return (
console.log(e)}
customDragIcon={Drag me!}
/>
);
};
export default Home;
```