Enhanced components for react

Usage no npm install needed!

<script type="module">
  import reactMe from '';


React Made Easy

A library of common react components to boost productivity.


This library can simply be installed using npm:

npm install react-me


In order to use the routing components you will need to wrap your top level component with the withMeRouter directive as shown below:

ReactDOM.render(withMeRouter(<App />), document.querySelector("#root"));

Then, simple routing can easily be achieved as shown in the code snippet below

const Routes = (({none, path}) => {
  login: new MeRoute(MePath.then("login")),
  home: new MeRoute(MePath.then("public").then("home")),
  notFound: new MeRoute(none, path("path")),

<MeRouter routes = {[
  Routes.login.callback(() => <h1>Login</h1>),
  Routes.home.callback(() => <h1>Home</h1>),
  Routes.notFound.callback(() => <h1>Not Found</h1>),
]} />

The routing classes support the capture of parameters and leverage the full power of typescript to enforce strict naming and type checks:

const Routes = (({num, str}) => {
  userView: new MeRoute(MePath.then("user").then(num("id")).then(str("view")))

<MeRouter routes = {[
  Routes.userView.callback((params) => <div>{} / {params.view}</div>),
]} />

Nested routing can also be achieved as shown below:

const Routes = (({num, path}) => {
  admin: new MeRoute(MePath.then("admin"), path("path")),
  list: new MeRoute(MePath.then("list").then("all")),
  edit: new MeRoute(MePath.then("edit").then(num("userID"))),

<MeRouter routes = {[
  Routes.admin.callback((params) => 
    // Nested admin routing 
    <MeRouter path={`/${params.path || ""}`} routes = {[
      Routes.list.callback(() =>
        // User list here...
      Routes.edit.callback((params) =>
        // User form here...
    ]} />
]} />

Once application routes have been defined, routing to one of them can be easily achieved using the application routing context:

const Routes = (({num}) => ({
    userDetails: new MeRoute(MePath.then("user").then(num("id")))

const router = useContext(MeRouterContext);
<button onClick={() =>
    router.route(Routes.userDetails.format({id: 123456}))}>
  Click me!


This component let's you chain multiple components all together to easily pass data from one to another

const MyForm = new MeFlow<number>()
        .then<number>((value, next) => <div onClick={() => next(String(value * 2))}>I am {value}, click to double me</div>)
        .then<string>((value, next, previous) => <div onClick={() => previous(Number(value) / 2)}>I am {value}, click to half me</div>)

<MyForm />


This component simplifies the creation of tables which is usually quite verbose. From the following given data set for example:

const people = [
    { name: "Nannie", surname: "Reid", age: 23 },
    { name: "Ernest", surname: "Avila", age: 64 },
    { name: "Elwood", surname: "Harding", age: 32 },

One can create a table as simply as:

<MeTable values={people} columns={columnsFrom("name", "surname", "age")} />

Columns customisation

It is possible to customise column's headers and how cells are being rendered by defining each column indvidually as shown below:

<MeTable values={people} columns={[
  {label: "Full Name", render: (person, index) => <span> #{index}: {} {person.surname}</span>},
  {label: "Age", render: renderField("age")},
]} />


The select components define a concise interface in order to easily pick one or multiple entries from a pre-defined list of objects. Given the following list of products for example:

const products = [
    { name: "Apple", id: 345768 },
    { name: "Orange", id: 287456 },
    { name: "Pear", id: 124632 },


<MeSingleSelect options={products} value={products[0]}
  getKey={(product) => String(}
  getLabel={(product) =>}
  onChange={(product) => alert("You've selected: " +} />


<MeMultipleSelect options={products} value={[products[0], products[1]]}
  getKey={(product) => String(}
  getLabel={(product) =>}
  onChange={(products) => alert("You've selected: " + =>","))} />


This component will automatically run a fade in and out animation whenever one of its direct children changes:

const [flag, setFlag] = React.useState(true);
  {flag ? <h1>A view</h1> : <h1> Another view</h1>}
  <button onClick={() => setFlag((old) => !old)}>Click me!</button>


This software is licensed under the MIT license

Copyright © 2019 All rights reserved. XdevL