# Component/ListItem

> Props: component-listitem.props.txt

## Examples


### Base

```tsx
{
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는'
  },
  render: args => {
    const {
      isOn,
      fixed,
      ...rest
    } = args;
    const sensors = useSensors(useSensor(PointerSensor));
    const [_isOn, setIsOn] = useState<boolean>(Boolean(args.isOn));
    useEffect(() => {
      setIsOn(Boolean(isOn));
    }, [isOn]);
    const [_fixed, setFixed] = useState<boolean>(Boolean(args.fixed));
    useEffect(() => {
      setFixed(Boolean(fixed));
    }, [fixed]);
    return <Stack justify='center'>
        <Stack justify='center' width={250}>
          <DndContext sensors={sensors} onDragEnd={console.log}>
            <SortableContext items={[args.id]} strategy={verticalListSortingStrategy}>
              <Wrapper width={250} className='list'>
                <ListItem isOn={_isOn} onToggle={isOn => setIsOn(isOn)} fixed={_fixed} onPin={fixed => setFixed(fixed)} {...rest} />
              </Wrapper>
            </SortableContext>
          </DndContext>
        </Stack>
      </Stack>;
  }
}
```

### Disabled

```tsx
{
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는'
  },
  render: args => {
    const {
      isOn,
      fixed,
      ...rest
    } = args;
    const sensors = useSensors(useSensor(PointerSensor));
    const [_isOn, setIsOn] = useState<boolean>(Boolean(args.isOn));
    useEffect(() => {
      setIsOn(Boolean(isOn));
    }, [isOn]);
    const [_fixed, setFixed] = useState<boolean>(Boolean(args.fixed));
    useEffect(() => {
      setFixed(Boolean(fixed));
    }, [fixed]);
    return <Stack justify='center'>
        <Stack justify='center' width={250}>
          <DndContext sensors={sensors} onDragEnd={console.log}>
            <SortableContext items={[args.id]} strategy={verticalListSortingStrategy}>
              <Wrapper width={250} className='list'>
                <ListItem isOn={_isOn} onToggle={isOn => setIsOn(isOn)} fixed={_fixed} onPin={fixed => setFixed(fixed)} {...rest} />
              </Wrapper>
            </SortableContext>
          </DndContext>
        </Stack>
      </Stack>;
  },
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는',
    disabled: true
  }
}
```

### Draggable

```tsx
{
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는'
  },
  render: args => {
    const {
      isOn,
      fixed,
      ...rest
    } = args;
    const sensors = useSensors(useSensor(PointerSensor));
    const [_isOn, setIsOn] = useState<boolean>(Boolean(args.isOn));
    useEffect(() => {
      setIsOn(Boolean(isOn));
    }, [isOn]);
    const [_fixed, setFixed] = useState<boolean>(Boolean(args.fixed));
    useEffect(() => {
      setFixed(Boolean(fixed));
    }, [fixed]);
    return <Stack justify='center'>
        <Stack justify='center' width={250}>
          <DndContext sensors={sensors} onDragEnd={console.log}>
            <SortableContext items={[args.id]} strategy={verticalListSortingStrategy}>
              <Wrapper width={250} className='list'>
                <ListItem isOn={_isOn} onToggle={isOn => setIsOn(isOn)} fixed={_fixed} onPin={fixed => setFixed(fixed)} {...rest} />
              </Wrapper>
            </SortableContext>
          </DndContext>
        </Stack>
      </Stack>;
  },
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는',
    draggable: true,
    index: 0
  }
}
```

### Full Case

```tsx
{
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는'
  },
  render: args => {
    const {
      isOn,
      fixed,
      ...rest
    } = args;
    const sensors = useSensors(useSensor(PointerSensor));
    const [_isOn, setIsOn] = useState<boolean>(Boolean(args.isOn));
    useEffect(() => {
      setIsOn(Boolean(isOn));
    }, [isOn]);
    const [_fixed, setFixed] = useState<boolean>(Boolean(args.fixed));
    useEffect(() => {
      setFixed(Boolean(fixed));
    }, [fixed]);
    return <Stack justify='center'>
        <Stack justify='center' width={250}>
          <DndContext sensors={sensors} onDragEnd={console.log}>
            <SortableContext items={[args.id]} strategy={verticalListSortingStrategy}>
              <Wrapper width={250} className='list'>
                <ListItem isOn={_isOn} onToggle={isOn => setIsOn(isOn)} fixed={_fixed} onPin={fixed => setFixed(fixed)} {...rest} />
              </Wrapper>
            </SortableContext>
          </DndContext>
        </Stack>
      </Stack>;
  },
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는',
    draggable: true,
    index: 0,
    isOn: true,
    fixed: true
  }
}
```

### Pinnable

```tsx
{
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는'
  },
  render: args => {
    const {
      isOn,
      fixed,
      ...rest
    } = args;
    const sensors = useSensors(useSensor(PointerSensor));
    const [_isOn, setIsOn] = useState<boolean>(Boolean(args.isOn));
    useEffect(() => {
      setIsOn(Boolean(isOn));
    }, [isOn]);
    const [_fixed, setFixed] = useState<boolean>(Boolean(args.fixed));
    useEffect(() => {
      setFixed(Boolean(fixed));
    }, [fixed]);
    return <Stack justify='center'>
        <Stack justify='center' width={250}>
          <DndContext sensors={sensors} onDragEnd={console.log}>
            <SortableContext items={[args.id]} strategy={verticalListSortingStrategy}>
              <Wrapper width={250} className='list'>
                <ListItem isOn={_isOn} onToggle={isOn => setIsOn(isOn)} fixed={_fixed} onPin={fixed => setFixed(fixed)} {...rest} />
              </Wrapper>
            </SortableContext>
          </DndContext>
        </Stack>
      </Stack>;
  },
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는',
    index: 0,
    fixed: true
  }
}
```

### Togglable

```tsx
{
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는'
  },
  render: args => {
    const {
      isOn,
      fixed,
      ...rest
    } = args;
    const sensors = useSensors(useSensor(PointerSensor));
    const [_isOn, setIsOn] = useState<boolean>(Boolean(args.isOn));
    useEffect(() => {
      setIsOn(Boolean(isOn));
    }, [isOn]);
    const [_fixed, setFixed] = useState<boolean>(Boolean(args.fixed));
    useEffect(() => {
      setFixed(Boolean(fixed));
    }, [fixed]);
    return <Stack justify='center'>
        <Stack justify='center' width={250}>
          <DndContext sensors={sensors} onDragEnd={console.log}>
            <SortableContext items={[args.id]} strategy={verticalListSortingStrategy}>
              <Wrapper width={250} className='list'>
                <ListItem isOn={_isOn} onToggle={isOn => setIsOn(isOn)} fixed={_fixed} onPin={fixed => setFixed(fixed)} {...rest} />
              </Wrapper>
            </SortableContext>
          </DndContext>
        </Stack>
      </Stack>;
  },
  args: {
    id: '0',
    text: '뉴진스도 춤추게 하는',
    index: 0,
    isOn: true
  }
}
```