react-area
TypeScript icon, indicating that this package has built-in type declarations

0.1.1-alpha.6 • Public • Published

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:

Package Sidebar

Install

npm i react-area

Weekly Downloads

64

Version

0.1.1-alpha.6

License

MIT

Unpacked Size

47.3 kB

Total Files

16

Last publish

Collaborators

  • everdimension