Skip to content

Commit

Permalink
Document new options in README file
Browse files Browse the repository at this point in the history
  • Loading branch information
Igorbek committed Nov 22, 2018
1 parent dca051a commit 6c95d39
Showing 1 changed file with 50 additions and 0 deletions.
50 changes: 50 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,9 @@ It allows to optionally pass options that allow to tweak transformer's behavior.
```ts
interface Options {
getDisplayName(filename: string, bindingName: string | undefined): string | undefined;
identifiers: CustomStyledIdentifiers;
ssr: boolean;
displayName: boolean;
}
```

Expand All @@ -167,6 +170,53 @@ function getStyledComponentDisplay(filename, bindingName) {
}
```

### `ssr`

By adding a unique identifier to every styled component, this plugin avoids checksum mismatches
due to different class generation on the client and on the server.

This option allows to disable component id generation by setting it to `false`.

Default value is `true` which means that component id is being injected.

### `displayName`

This option enhances the attached CSS class name on each component with richer output
to help identify your components in the DOM without React DevTools.

It also adds allows you to see the component's `displayName` in React DevTools.

To disable `displayName` generation set this option to `false`

Default value is `true` which means that display name is being injected.

### `identifiers`

This option allows to customize identifiers used by `styled-components` API functions.

> **Warning**. By providing custom identifiers, predefined ones are not added automatically.
> Make sure you add standard APIs in case you meant to use them.
```ts
interface CustomStyledIdentifiers {
styled: string[];
attrs: string[];
}
```

- `styled` - list of identifiers of `styled` API (default `['styled'])
- `attrs` - list of identifiers of `attrs` API (default `['attrs'])

Example

```ts
const styledComponentsTransformer = createStyledComponentsTransformer({
identifiers: {
styled: ['styled', 'typedStyled'] // typedStyled is an additional identifier of styled API
}
});
```

# Notes

Technically, `typescript-plugin-styled-components` is not a TypeScript plugin, since it is only exposed as a TypeScript transformer.

0 comments on commit 6c95d39

Please sign in to comment.