Skip to content
This repository has been archived by the owner on Jan 24, 2025. It is now read-only.

Commit

Permalink
docs(docz): update getting started instructions
Browse files Browse the repository at this point in the history
Fixes #1007
  • Loading branch information
rakannimer authored Aug 28, 2019
1 parent e2286ac commit c63d6e6
Showing 1 changed file with 39 additions and 7 deletions.
46 changes: 39 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,15 @@ Since the release of v1 you need `react` and `react-dom` `v16.8.0` or later inst

Getting started with **Docz** is really quick and easy.

Firstly, install `docz` using your favourite package manager:
If you're starting from scratch use [create-docz-app](https://www.npmjs.com/package/create-docz-app) to create your project.

```sh
npx create-docz-app my-docz-app
# or
yarn create docz-app my-docz-app --example typescript
```

If you want to add `docz` to a codebase, then add docz using your favourite package manager:

```bash
$ yarn add --dev docz@next react react-dom
Expand All @@ -101,17 +109,18 @@ $ yarn add --dev docz@next react react-dom
$ npm install --save-dev docz@next react react-dom
```

**Note**: `react` and `react-dom` will not be installed automatically. You'll have to install them yourself.
> **Note**: `react` and `react-dom` will not be installed automatically. You'll have to install them yourself.
Next, add some `.mdx` files anywhere inside your project:
Next, add some `.mdx` files anywhere in your project:

```mdx
---
name: Button
route: /
---

import { Playground, Props } from 'docz'
import Button from './'
import { Playground, Props } from "docz";
import Button from "./Button";

# Button

Expand All @@ -120,9 +129,32 @@ import Button from './'
## Basic usage

<Playground>
<Button>Click me</Button>
<Button kind="secondary">Click me</Button>
<Button type="submit">Click me</Button>
<Button>No, click me</Button>
</Playground>

```

And a Button component `Button.jsx`:

```typescript
import React from "react";
import t from "prop-types";

const Button = ({ children, type }) => <button type={type}>{children}</button>;

Button.propTypes = {
/**
* This is a pretty good description for this prop
* Button type. Learn more about `type` attribute [at MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
*/
type: t.oneOf(["button", "submit", "reset"])
};
Button.defaultProps = {
type: "button"
};
export default Button;

```

Finally, run the Docz development server:
Expand Down

0 comments on commit c63d6e6

Please sign in to comment.