A next-generation tool to create blazing-fast documentation sites
API
created:3/5/2021
updated:3/5/2021
loc
48
comments
13%
passed
14
coverage
33%

Source

avatar of atanasster
@component-controls/components
3.14.5

Syntax highliting source code component. Uses prism for the actual source display.

import { Source } from '@component-controls/components';

Overview

export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};
Name
Description
Default
Controls
children

source code to be displayed.

(string & (boolean | ReactChild | ReactFragment | ReactPortal | null))
language

source lnguage used, by default "jsx".

markupbashclikeccppcssjavascriptjsxcoffeescriptactionscriptcss-extrdiffgitgographqlhandlebarsjsonlessmakefilemarkdownobjectivecocamlpythonreasonsassscsssqlstylustsxtypescriptwasmyaml
-
dark

used to specify a "dark" color theme - applcable only if no custom theme prop is provided. if dark: true, duotoneDark theme is used. if dark: false, duotoneLight theme is used.

boolean
-
Name
Description
Default
ActionContainerProps(2 properties)
actions

optional actions provided to the component

ActionItem[]
-
plain

if plain, skip the border and spacing around the children

boolean
-
SyntaxHighlighterProps(9 properties)

Commits

Date
Author
Commit Message
11/17/2020

atanasster

avatar of atanasster
chore: cleanup default imports of React
6/28/2020

atanasster

avatar of atanasster
feat: mdx code add parameters and mdx docs
6/25/2020

atanasster

avatar of atanasster
fix: action items title to node
6/16/2020

atanasster

avatar of atanasster
fix: trim right source code
5/26/2020

atanasster

avatar of atanasster
chore: add gatsby template site layout
5/3/2020

atanasster

avatar of atanasster
feat: props table featured controls with actions
4/19/2020

atanasster

avatar of atanasster
chore: clean up props tables
3/21/2020

atanasster

avatar of atanasster
feat: add aria-label to action items
3/20/2020

atanasster

avatar of atanasster
docs: update Source and SyntaxHighlight docs
3/20/2020

atanasster

avatar of atanasster
docs: collapsible update
14 commits
package
imports
peer
copy
react
^17.0.1
useStateMouseEventFC
*
theme-ui
^0.8.4
jsx
file
imports
"../SyntaxHighlighter"
SyntaxHighlighterSyntaxHighlighterProps
"../ActionContainer"
ActionContainerActionContainerProps

Stories

Theme

export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};

Theme Selector

export const sample = () => {
const [state, setState] = React.useState(false);
return (
<BooleanEditor
name="prop"
onChange={(name, newVal) => setState(newVal)}
prop={{ type: ControlTypes.BOOLEAN, value: state }}
/>
);
};