Skip to content
Permalink
Browse files
Docs: Update examples syntax
  • Loading branch information
sapegin committed Jul 14, 2017
1 parent c944683 commit 88724cd7f21c97f9f05ca129911cc2828eb8dfa6
@@ -1 +1,3 @@
<CounterButton/>
```js
<CounterButton/>
```
@@ -1,14 +1,18 @@
Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`.

<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```jsx
<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```

If you want to set the default state you can do something like that:

initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```jsx
initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```
@@ -1,4 +1,6 @@
You can `require` external files in your examples:

const names = require('dog-names').all;
<RandomButton variants={names}/>
```jsx
const names = require('dog-names').all;
<RandomButton variants={names}/>
```
@@ -1,3 +1,5 @@
Enhanced/Decorated components work as well:

<WrappedButton>I'm a wrapped button</WrappedButton>
```jsx
<WrappedButton>I'm a wrapped button</WrappedButton>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```
@@ -1,4 +1,6 @@
You can `require` external files in your examples:

const names = require('dog-names').all;
<RandomButton variants={names}/>
```jsx
const names = require('dog-names').all;
<RandomButton variants={names}/>
```
@@ -1,14 +1,18 @@
Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`.

<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```jsx
<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```

If you want to set the default state you can do something like that:

initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```jsx
initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```
@@ -1,4 +1,6 @@
You can `require` external files in your examples:

const names = require('dog-names').all;
<RandomButton variants={names}/>
```jsx
const names = require('dog-names').all;
<RandomButton variants={names}/>
```
@@ -2,6 +2,6 @@ Custom Endpoint Example

The example component invokes an endpoint added to the running styleguide server.

```example
```js
<CustomEndpoint />
```
@@ -1 +1,3 @@
<CounterButton/>
```jsx
<CounterButton/>
```
@@ -1,14 +1,18 @@
Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`.

<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```jsx
<div>
<button onClick={() => setState({isOpen: true})}>Open</button>
<Modal isOpen={state.isOpen}>
<h1>Hallo!</h1>
<button onClick={() => setState({isOpen: false})}>Close</button>
</Modal>
</div>
```

If you want to set the default state you can do something like that:

initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```jsx
initialState = {count: 1};
<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```
@@ -1,4 +1,6 @@
You can `require` external files in your examples:

const names = require('dog-names').all;
<RandomButton variants={names}/>
```jsx
const names = require('dog-names').all;
<RandomButton variants={names}/>
```
@@ -1,3 +1,5 @@
Enhanced/Decorated components work as well:

<WrappedButton>I'm a wrapped button</WrappedButton>
```jsx
<WrappedButton>I'm a wrapped button</WrappedButton>
```
@@ -1,3 +1,5 @@
Should use the `fantasy` font inherited from `body`:

<Label />
```jsx
<Label />
```
@@ -1,3 +1,5 @@
Extra example file linked via `@example` doclet:

<Placeholder type="bear"/>
```jsx
<Placeholder type="bear"/>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```
@@ -1 +1,3 @@
<Placeholder type="beard"/>
```jsx
<Placeholder type="beard"/>
```
@@ -1,4 +1,6 @@
You can `require` external files in your examples:

const names = require('dog-names').all;
<RandomButton variants={names}/>
```jsx
const names = require('dog-names').all;
<RandomButton variants={names}/>
```

0 comments on commit 88724cd

Please sign in to comment.