React Made Easy

A library of common react components to boost productivity.

Installation

This library can simply be installed using npm:

npm install react-me

Routing

This API allows you to define routes you can navigate to from your UI. In order to use the routing components you will need to wrap your top level component with the withMeRouter directive as shown below:

const root = createRoot(document.querySelector("#root")!);
root.render(withMeRouter(<App />));

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")),
})(MePath);

<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")))
})(MePath);

<MeRouter routes = {[
  Routes.userView.callback((params) => <div>{params.id} / {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"))),
})(MePath);

<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")))
}))(MePath);

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

Flow

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>)
        .render(8);

<MyForm />

Table

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.name} {person.surname}</span>},
  {label: "Age", render: renderField("age")},
]} />

Select

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 },
  ];

Single

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

Multiple

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

Fader

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

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

Developing

You can quickly test changes made to that repo by updating the sample and running the below command in order to access it locally from your web browser:

npx vite

License

This software is licensed under the MIT license

Copyright © 2019 All rights reserved. XdevL