@flive/mdx

Flive MDX

⚛️#️⃣ MDX + Flive

npm i @flive/mdx

Wrap your application with the FliveMDX provider component. All child MDX documents will receive component and theming context from this provider.

import React from 'react'
import FliveMDX from '@flive/mdx'
import Document from './document.mdx'

export default props =>
  <FliveMDX>
    <Document />
  </FliveMDX>

Theming

Pass a theme object to the FliveMDX provider component to add a Flive theming context. The theme is a [Flive System Theme][] that can be used to apply consistent colors and typography across an entire app.

const colorToken = {
  codGray: {
    name: 'Cod gray',
    color: codGray,
    contentColor: pearlWhite
  },
  nightBlue: {
    name: 'Night blue',
    color: nightBlue,
    contentColor: pearlWhite
  }
};
const semanticColor = {
  // primary colors
  primary: { useName: 'Primary', ...colorToken.nightBlue },
  secondary: { useName: 'Secondary', ...colorToken.codGray }
};
const common = {
  semanticColor
};
// example theme
export default {
  common
};

Styles

An additional styles and systemStyles objects can be added to the theme object to apply styles to MDX elements.

// example theme styles
export default {
  styles: {
    h1: {
      color: 'red'
    }
  }
};

The styles object uses CSS syntax only.

// example theme styles
export default {
  styles: {
    h1: {
      textTransform: 'uppercase',
      letterSpacing: '0.2em'
    }
  }
};

The systemStyles object uses Flive System props used in View and Text components.

// example theme styles
export default {
  systemStyles: {
    h4: {
      fontFamily: 'main',
      fontSize: { xs: 'large', sm: 'xLarge' }
    }
  }
};

Flive Components

For usage outside of an MDX file, use the Styled component to render styled components anywhere in your app. These components can be styled using the theme and the theme.styles and theme.systemStyles objects.

import React from 'react';
import { Styled } from '@flive/mdx';

export default props => (
  <Styled.wrapper>
    <Styled.h1>Hello</Styled.h1>
  </Styled.wrapper>
);

Nesting Providers

The FliveMDX component can be nested to change styles contextually. This can be useful for styling sections of a page differently where needed.

// example root-level provider
import React from 'react';
import FliveMDX from '@flive/mdx';

export default props => <FliveMDX>{props.children}</FliveMDX>;

// example nested provider for style overrides
import React from 'react';
import FliveMDX, { Styled } from '@rebass/mdx';

const localTheme = {
  common: {
    ...
  },
  styles: {
    ...
  },
  systemStyles: {
    ...
  }
};

export default props => (
  <FliveMDX
    theme={localTheme}
  >
    <Styled.h1>Hello</Styled.h1>
  </FliveMDX>
);

API

• FliveMDX: core provider component
  • props:
    • theme add a custom [Flive System Theme][]
      • theme.styles override component styles using CSS syntax
      • theme.systemStyles override component styles using Flive System props used in View and Text components.
    • disableGlobal disable global styling
    • components override specific components or add custom components to code fence examples
• Styled

License

This project is licensed under a custom license. See the LICENSE file for details.