https://github.com/ytiurin/react-hook-layout

Layouts in React.
https://github.com/ytiurin/react-hook-layout

hook layout react react-hooks

Last synced: about 1 month ago
JSON representation

Layouts in React.

• Host: GitHub
• URL: https://github.com/ytiurin/react-hook-layout
• Owner: ytiurin
• License: isc
• Created: 2020-04-03T20:29:40.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:48:09.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T13:20:34.333Z (8 months ago)
• Topics: hook, layout, react, react-hooks
• Language: JavaScript
• Homepage: https://ytiurin.github.io/react-hook-layout/
• Size: 3.02 MB
• Stars: 18
• Watchers: 3
• Forks: 1
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-hook-layout`
• awesome-react-hooks-cn - `react-hook-layout`
• awesome-react-hooks - `react-hook-layout`
• awesome-react-hooks - `react-hook-layout`

README

        
# react-hook-layout

[Demo page][demo]

This hook is a variation of the approach, described on [Composition vs Inheritance](https://reactjs.org/docs/composition-vs-inheritance.html "Composition vs Inheritance") documentation page.

Layout is now a separate component, and can be applied on different pages. Also, it's easy to switch layouts in runtime.

## Install

```

npm i react-hook-layout

```

## Usage

1. Layout component look like this:

```javascript

import { useSlots } from "react-hook-layout";

export const MyLayout = () => {

  const { A, B } = useSlots("A", "B");

  return (

    <>

      {A}

      {B}

    >

  );

};

```

2. Page component using layout:

```javascript

import { defineSlots, useLayout } from "react-hook-layout";

import { MyLayout } from "./MyLayout";

const { A, B } = defineSlots("A", "B");

const MyPage = () => {

  const Layout = useLayout(MyLayout);

  return (

    

      My article

      Author by Me

    

  );

};

```

Page will render to:

```html

My article

Author by Me

```

## Examples

Check examples on the [demo page][demo]

_or_

Run storybook localy:

```

git clone https://github.com/ytiurin/react-hook-layout.git

cd react-hook-layout/storybook

npm run storybook

```

[demo]: https://ytiurin.github.io/react-hook-layout/