ra
react-area
npm i react-area
ra

react-area

_NOTE_: For now, this is an experimental Proof of Concept.

by everdimension

0.1.1-alpha.6 (see all)License:MITTypeScript:Built-In
npm i react-area
Readme

React Area

NOTE: For now, this is an experimental Proof of Concept.

Install

npm install react-area

Getting Started

First, wrap your app in the <AreaProvider /> component:

import { AreaProvider } from 'react-area';
import ReactDOM from 'react-dom';
import React from 'react';

ReactDOM.render(
  <AreaProvider>
    <YourApp />
  </AreaProvider>,
  document.getElementById('root'),
);

Next, anywhere in your app you can define an "render area" with a <RenderArea /> component:

import { RenderArea } from 'react-area';
import React from 'react';

function Layout() {
  return (
    <div>
      <aside>
        <RenderArea name="navigation" />
      </aside>
      <main>
        <RenderArea name="main" />
      </main>
    </div>
  );
}

And then, from any other component you can render inside those areas by using the <Content /> component:

import { Content } from 'react-area';
import React from 'react';

function SomeFeature() {
  return (
    <>
      <Content name="navigation">
        <a href="/some-feature">SomeFeature</a>
      </Content>

      <Content name="main">
        <div>Feature Content</div>
      </Content>
    </>
  );
}

Prior Art

This project is heavily inspired by these projects:

Downloads/wk

30

GitHub Stars

33

LAST COMMIT

1mo ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

3
VersionTagPublished
0.1.1-alpha.6
latest
1mo ago
No alternatives found
No tutorials found
Add a tutorial