# reactjs-slot-layout

> reactjs slot based layout system

[![Build Status](https://travis-ci.org/meabed/reactjs-slot-layout.svg?branch=master)](https://travis-ci.org/meabed/reactjs-slot-layout)
[![NPM version](https://img.shields.io/npm/v/reactjs-slot-layout.svg)](https://www.npmjs.com/package/reactjs-slot-layout)
![Downloads](https://img.shields.io/npm/dm/reactjs-slot-layout.svg)
[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
<a href="https://david-dm.org/meabed/reactjs-layout-slot">
<img src="https://david-dm.org/meabed/reactjs-layout-slot.svg" alt="Dependency Status" />
</a>
<a href="https://david-dm.org/meabed/reactjs-layout-slot?type=dev">
<img src="https://david-dm.org/meabed/reactjs-layout-slot/dev-status.svg" alt="devDependency Status" />
</a>
<a href="LICENSE.md">
<img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="Software License">
</a>
<a href="https://meabed.com">
<img src="https://img.shields.io/badge/Author-blog-green.svg?style=flat-square" alt="Authoer Blog">
</a>

---

## ✨ Features

- Easy layout management
- Override layout from any component
- Support for wrapped components and React Fragment
- Handle multiple layouts with ease
- Very lightweight ~ 5KB

## 🔧 Installation

```sh
yarn add reactjs-slot-layout
```

## 🎬 Getting started

Let's demonstrate simple usage with ... example:

```ts
// your code example
```

## 🎭 Examples

Go checkout [examples](./examples) !

[![Edit currying-fire-rm55g](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/currying-fire-rm55g?fontsize=14&view=preview)

## 📜 API

> Document your API here

### `publicMethodOne(value:string): string`

This methods does foo bar moo...

**Example:**

```ts
// example
```

## 🎓 Guides

<details>
<summary>How to do Foo</summary>
Today we're gonna build Foo....
</details>

### 🕵️ Troubleshooting

## Contributing

Anyone is welcome to [contribute](CONTRIBUTING.md), however, if you decide to get involved, please take a moment to review the guidelines:

- [Only one feature or change per pull request](CONTRIBUTING.md#only-one-feature-or-change-per-pull-request)
- [Write meaningful commit messages](CONTRIBUTING.md#write-meaningful-commit-messages)
- [Follow the existing coding standards](CONTRIBUTING.md#follow-the-existing-coding-standards)

## 🥂 License

[MIT](./LICENSE.md) as always


reactjs-slot-layout

reactjs-slot-layout

✨ Features

🔧 Installation

🎬 Getting started

🎭 Examples

📜 API

🎓 Guides

🕵️ Troubleshooting

Contributing

🥂 License

Keywords