@mappedin/react-ui

A small, unopinionated component library for Mappedin JS.

Usage

Installation

With NPM:

npm install @mappedin/react-ui

With Yarn:

yarn add @mappedin/react-ui

Getting Started

// Import components
import { Search } from '@mappedin/react-ui/components/search';
import { FloorSelector } from '@mappedin/react-ui/components/floor-selector';

// Import a theme
import '@mappedin/react-ui/themes/mappedin-light.css';

// Render the component in your app
export const App: React.FC = () => {
    return (
        <div>
            <Search {...props} />
            <FloorSelector {...props} />
        </div>
    )
}

Default Themes

// Default light theme
import '@mappedin/react-ui/themes/mappedin-light.css';

// Default dark theme
import '@mappedin/react-ui/themes/mappedin-dark.css';

Headless Mode

// Import only functional CSS to use components unstyled
import '@mappedin/react-ui/themes/basic.css';

Styling

See Styling Guide.

/* Style using .mappedin__* class names */
.mappedin__icon--magnifying-glass {
	color: white;
}

Custom Props

See Props API.

// Pass props down to inner elements using `props`
const App: React.FC = () => (
    <SearchBar
        props={
            wrapper: {
                tabIndex: 0
            }
        }
    />
);