react-me
    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.

    Installation

    This library can simply be installed using npm:

    npm install react-me

    Routing

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

    License

    This software is licensed under the MIT license

    Copyright © 2019 All rights reserved. XdevL

    Install

    npm i react-me

    DownloadsWeekly Downloads

    4

    Version

    0.3.4

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    41

    Last publish

    Collaborators

    • avatar