Skip to content

Commit 6c95d39

Browse files
committed
Document new options in README file
1 parent dca051a commit 6c95d39

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed

README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,9 @@ It allows to optionally pass options that allow to tweak transformer's behavior.
147147
```ts
148148
interface Options {
149149
getDisplayName(filename: string, bindingName: string | undefined): string | undefined;
150+
identifiers: CustomStyledIdentifiers;
151+
ssr: boolean;
152+
displayName: boolean;
150153
}
151154
```
152155

@@ -167,6 +170,53 @@ function getStyledComponentDisplay(filename, bindingName) {
167170
}
168171
```
169172

173+
### `ssr`
174+
175+
By adding a unique identifier to every styled component, this plugin avoids checksum mismatches
176+
due to different class generation on the client and on the server.
177+
178+
This option allows to disable component id generation by setting it to `false`.
179+
180+
Default value is `true` which means that component id is being injected.
181+
182+
### `displayName`
183+
184+
This option enhances the attached CSS class name on each component with richer output
185+
to help identify your components in the DOM without React DevTools.
186+
187+
It also adds allows you to see the component's `displayName` in React DevTools.
188+
189+
To disable `displayName` generation set this option to `false`
190+
191+
Default value is `true` which means that display name is being injected.
192+
193+
### `identifiers`
194+
195+
This option allows to customize identifiers used by `styled-components` API functions.
196+
197+
> **Warning**. By providing custom identifiers, predefined ones are not added automatically.
198+
> Make sure you add standard APIs in case you meant to use them.
199+
200+
```ts
201+
interface CustomStyledIdentifiers {
202+
styled: string[];
203+
attrs: string[];
204+
}
205+
```
206+
207+
- `styled` - list of identifiers of `styled` API (default `['styled'])
208+
- `attrs` - list of identifiers of `attrs` API (default `['attrs'])
209+
210+
Example
211+
212+
```ts
213+
const styledComponentsTransformer = createStyledComponentsTransformer({
214+
identifiers: {
215+
styled: ['styled', 'typedStyled'] // typedStyled is an additional identifier of styled API
216+
}
217+
});
218+
```
219+
170220
# Notes
171221

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

0 commit comments

Comments
 (0)