Source

@component-controls/components

3.15.0

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

browse

docs

issues

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))		export const sample = () => { const [state, setState] = React.useState(false); return ( <BooleanEditor name="prop" onChange={(name, newVal) => setState(newVal)} prop={{ type: ControlTypes.BOOLEAN, value: state }} /> ); };
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	chore: cleanup default imports of React
6/28/2020	atanasster	feat: mdx code add parameters and mdx docs
6/25/2020	atanasster	fix: action items title to node
6/16/2020	atanasster	fix: trim right source code
5/26/2020	atanasster	chore: add gatsby template site layout
5/3/2020	atanasster	feat: props table featured controls with actions
4/19/2020	atanasster	chore: clean up props tables
3/21/2020	atanasster	feat: add aria-label to action items
3/20/2020	atanasster	docs: update Source and SyntaxHighlight docs
3/20/2020	atanasster	docs: collapsible update

14 commits

package	imports	peer
copy-to-clipboard ^3.2.1	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 }}
    />
  );
};

Components/Sidebar

Components/Subtitle

API

Source

Commits

Stories

Theme

Theme Selector