How to use the docz.useComponents function in docz

To help you get started, we’ve selected a few docz examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github doczjs / docz / core / gatsby-theme-docz / src / base / Layout.js View on Github external
const Route = ({ children, entry, ...defaultProps }) => {
  const components = useComponents()
  const NotFound = components.notFound
  const Layout = components.layout
  const props = { ...defaultProps, doc: entry }
  if (!entry) return 
  return (
    
      {children}
    
  )
}
github doczjs / docz / core / docz-theme-default / src / components / ui / Props / PropsTable.tsx View on Github external
export const PropsTable: React.SFC = ({
  props,
  getPropType,
}) => {
  const entries = Object.entries(props)
  const components = useComponents()
  const Paragraph = useMemo(
    () => styled(components.P || 'p')`
      margin: 0;
      font-size: 16px;
      color: ${get('colors.blockquoteColor')};
      padding: 0 15px 8px 15px;
    `,
    []
  )

  return (
    
      {entries.map(([key, prop]) => {
        if (!prop.type && !prop.flowType) return null
        return (
github doczjs / docz / core / docz-theme-default / src / components / ui / Props / PropsRaw.tsx View on Github external
export const PropsRaw: React.SFC = ({
  props,
  getPropType,
}) => {
  const entries = Object.entries(props)
  const components = useComponents()
  const Paragraph = useMemo(
    () => styled(components.P || 'p')`
      font-size: 16px;
      color: ${get('colors.sidebarText')};
    `,
    []
  )

  return (
    
      {entries.map(([key, prop]) => {
        if (!prop.type && !prop.flowType) return null
        return (
          
            <title>
              &lt;PropName&gt;{key}&lt;/PropName&gt;</title>
github gribnoysup / react-yandex-maps / docz / components / Props.js View on Github external
export const Props = ({ title, isToggle, isRaw, of: component }) => {
  const components = useComponents();
  const { props: stateProps } = React.useContext(doczState.context);
  const PropsComponent = components.props;
  const filename = get('__filemeta.filename', component);
  const filemetaName = get('__filemeta.name', component);
  const componentName = filemetaName || component.displayName || component.name;
  const found =
    stateProps &&
    stateProps.length > 0 &&
    stateProps.find(item =>
      filename ? item.key === filename : item.key.includes(`${componentName}.`)
    );

  const value = get('value', found) || [];
  const firstDefinition = first(value);
  const definition = value.find(i => i.displayName === componentName);
github doczjs / docz / core / docz-theme-default / src / components / ui / Props / index.tsx View on Github external
export const Props: React.SFC = ({
  title,
  isRaw,
  isToggle,
  ...props
}) =&gt; {
  const [isOpen, setIsOpen] = useState(true)

  const components = useComponents()
  const Title = useMemo(
    () =&gt; styled(components.H3 || 'h3')`
      padding: 8px 0;
      position: relative;
      ${!isRaw ? 'margin-bottom: 0;' : ''}
      ${!isOpen || isRaw ? 'border-bottom: 1px solid rgba(0, 0, 0, 0.1);' : ''}

      ${
        isToggle
          ? `
        cursor: pointer;
        padding-right: 40px;

        &amp;::after {
          content: '';
          position: absolute;
github doczjs / docz / core / gatsby-theme-docz / src / components / Layout.js View on Github external
const Route = ({ children, ...props }) =&gt; {
  const components = useComponents()
  const NotFound = components.NotFound
  if (!props.entry) return 

  return (
    
       {children}}
      /&gt;
    
  )
}

docz

It's has never been so easy to documents your things!

MIT
Latest version published 3 years ago

Package Health Score

59 / 100
Full package analysis