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

    0.3.4 • Public • Published

    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


    npm i react-me

    DownloadsWeekly Downloads






    Unpacked Size

    108 kB

    Total Files


    Last publish


    • avatar