@ryancole/scenic

Two simple concepts: <Scene> and <View>

npm install @ryancole/scenic

Scene

Scene places history on to context. You must provide Scene with history via props. On the server, you would likely provide history created via createMemoryHistory. On the client, you would likely provide history created via createBrowserHistory.

View

View compares the current location pathname with its own path prop. If any of the path prop values match the current location pathname, then the children of View will be rendered. The path prop may be a string or an array of string.

Alternatively, specifying a not prop will cause View to render only if the current location pathname does not match any of the values of the path prop.

If a value in the path prop begins with /, matching with pathname will begin at the beginning of pathname. If the value of the path prop does not begin with /, matching with pathname will begin at the end of pathname.

Link

Link is a convenience component for pushing to history location.

Link supports a custom class name when the current location's pathname matches the Link's own to property value. If the Link directs to the current active location pathname, it will use the activeClassName property.

Example

// in the browser
import createHistory from "history/createBrowserHistory";

// in the server
import createHistory from "history/createMemoryHistory";

// instanciate history
const history = createHistory();

function Application() {
  return (
    <Scene history={history}>

      // utility Link component.
      <Link to="/" activeClassName="active">
        Home
      </Link>

      // straight forward, single path match. matching will begin at the
      // *beginning* of the location pathname.
      <View path="/team">
        <Teams />
      </View>

      // straight forward, single path match with parameters. children
      // will receive `id` as a prop.
      <View path="/team/:id">
        <Team />
      </View>

      // single path match. matching will begin at the *end* of the
      // location pathname.
      <View path="create">
        <CreateTeam />
      </View>

      // single path match that will only render while the current
      // location pathname does not match `/foo`.
      <View not path="/foo">
        <h1>Bar is best</h1>
      </View>

      // multiple path match that will only render while the current
      // location pathname matches any of the provided `path` values.
      <View path={["/foo", "/bar"]}>
        <h1>Bar is best, but Foo is welcome</h1>
      </View>

      // multiple path match that will only render while the current
      // location pathname does *not* match any of the provided `path`
      // values.
      <View not path={["/foo", "/bar"]}>
        <h1>404</h1>
      </View>

    </Scene>
  );
}