UNPKG

react-style-guide

Version:

A component to display React components with their JSX source in style guides

github.com/alexlande/react-style-guide

alexlande/react-style-guide

165 lines (93 loc) • 3.38 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
# React Style Guide A simple React component for building living style guides with React. Check out the [example](http://www.alexlande.com/react-style-guide/). ## Features - Markup samples based on React elements passed in as children. - Custom markup strings if you don't want auto-generated ones. - Built-in syntax highlighting with `highlight.js` (or include your own). - Highly configurable (maybe too configurable). - Allows custom class names and text on every element. - Titles, descriptions, and expand/collapse controls are optional. ## Usage ```js <StyleGuideItem title="Cool Button" description="This is a very cool button!" > <CoolButton> Button! </CoolButton> <CoolButton type="primary"> Primary Button! </CoolButton> </StyleGuideItem> ``` Optionally, include the CSS in `react-style-guide.css` for a nice set of default styles. ## Building the Examples ```bash npm install npm run example ``` Then you can browse to [http://localhost:8080/](http://localhost:8080/) To build the example files once: ```bash npm run build-example ``` Then you can open `./examples/index.html` ### Props #### title Type: `String` Optional A text title for the section. #### description Type: `String` Optional An expanded description. #### descriptionIsHtml Type: `Boolean` Default: `false` Set to `true` to use HTML for the section description. #### staticMarkup Type: `String` Example markup as a string. Use when you don't want auto-generated JSX markup for a section. #### highlighter Type: `Function` A custom syntax highlighting function. Takes the code example markup as a string, must return the example as HTML with syntax highlighting markup. #### expandingMarkup Type: `Boolean` Default: `true` Set to `false` to disable expandable markup samples (making markup visible all the time). #### markupExpandedByDefault Type: `Boolean` Default: `false` Set to `true` to make markup samples expanded by default. #### sectionAnchor Type: `Boolean` Default: `true` Set to true to prevent section titles from being wrapped in anchor tags (allowing users to easily link to sections). #### headingTag Type: `String` Default: `h2` HTML tag name for style guide headings. #### componentClass Type: `String` Default: `Guide` HTML class for the top level element of the component. #### headingClass Type: `String` Default: `Guide-heading` HTML class for the heading element. #### descriptionClass Type: `String` Default: `Guide-description` HTML class for the description element. #### exampleClass Type: `String` Default: `Guide-example` HTML class for the example element. #### markupClass Type: `String` Default: `Guide-markup` HTML class for the markup sample element. #### anchorClass Type: `String` Default: `Guide-anchor` HTML class for the anchor wrapping the heading element. #### expanderSectionClass Type: `String` Default: `Guide-expanderSection` HTML class for the element containing the section expander button. #### expanderClass Type: `String` Default: `Guide-expander` HTML class for the section expander button. #### expanderInactiveText Type: `String` Default: `Expand` Text content of the section expander button when section is not expanded. #### expanderActiveText Type: `String` Default: `Collapse` Text content of the section expander button when section is expanded.