---
name: Study List
menu: Views
route: views/studyList
---

import { useState } from 'react'
import { Playground, Props } from 'docz';
import StudyList from './';
import Button from '../../components/Button';
import { getMockedStudies } from '../../utils/'

# StudyList

Description...

## Import

```javascript
import { StudyList } from '@ohfi/ui';
```

## StudyList

<Playground>
  {() => {
    const [studies, setStudies] = useState([])
    const handleStudyList = (number) => {
      const studies = getMockedStudies(number)
      setStudies(studies)
    }
    return (
      <div>
        <div className="bg-white p-4">
          <Button className="mr-2" onClick={() => handleStudyList(0)}>0 Studies</Button>
          <Button className="mr-2" onClick={() => handleStudyList(50)}>50 Studies</Button>
          <Button className="mr-2" onClick={() => handleStudyList(100)}>100 Studies</Button>
          <Button className="mr-2" onClick={() => handleStudyList(1000)}>1000 Studies</Button>
        </div>
        <StudyList studies={studies} />
      </div>
    );
  }}
</Playground>

## Properties

<Props of={StudyList} />