{"id":19840639,"url":"https://github.com/joaocnh/react-loki","last_synced_at":"2025-05-01T19:30:44.949Z","repository":{"id":52447587,"uuid":"103062505","full_name":"JoaoCnh/react-loki","owner":"JoaoCnh","description":"A React Wizard...... pun intented","archived":false,"fork":false,"pushed_at":"2020-05-27T09:07:00.000Z","size":2366,"stargazers_count":8,"open_issues_count":5,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-22T20:19:26.935Z","etag":null,"topics":["form","loki","react","react-wizard","wizard","wizard-steps","wizards"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JoaoCnh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-10T21:15:25.000Z","updated_at":"2022-08-03T17:45:29.000Z","dependencies_parsed_at":"2022-08-25T05:21:25.914Z","dependency_job_id":null,"html_url":"https://github.com/JoaoCnh/react-loki","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-loki","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-loki/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-loki/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JoaoCnh%2Freact-loki/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JoaoCnh","download_url":"https://codeload.github.com/JoaoCnh/react-loki/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251932576,"owners_count":21667171,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","loki","react","react-wizard","wizard","wizard-steps","wizards"],"created_at":"2024-11-12T12:27:37.174Z","updated_at":"2025-05-01T19:30:44.205Z","avatar_url":"https://github.com/JoaoCnh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[build-badge]: https://travis-ci.org/JoaoCnh/react-loki.svg?branch=master\n[build]: https://travis-ci.org/JoaoCnh/react-loki\n[npm-badge]: https://badge.fury.io/js/react-loki.svg\n[npm]: https://www.npmjs.org/package/react-loki\n[coveralls-badge]: https://coveralls.io/repos/github/JoaoCnh/react-loki/badge.svg?branch=master\n[coveralls]: https://coveralls.io/github/JoaoCnh/react-loki\n\n![react-loki](demo/public/react-loki-banner.jpg)\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n[![license](http://img.shields.io/npm/l/react-loki.svg)](./LICENSE)\n\n## react-loki is a Wizard Component made with React.... and yes.... the pun is intended.\n\n## Overview\n\nThe goal of this component is to simplify the implementation of a Wizard like experience on a react application.\n\n**Loki** is an uncommited React component. It doesn't force anything on you and you hold the control over everything on each and every single step component.\n\nYou can use it for presentational content and forms. **Loki** only handles the back and forth mechanic of wizards.\n\n## Installation\n\nAdd react-loki to your project\n\n```shell\nyarn add react-loki\n```\n\n**Table of Contents**\n\n- [Usage](#usage)\n- [Demo](#demo)\n- [Importing Styles](#importing-styles)\n- [API](#api)\n    - [`\u003cLoki /\u003e`](#loki-)\n        - [Loki props](#loki-props)\n            - [`steps: array`](#steps-array-required)\n            - [`onFinish: function`](#onfinish-function-required)\n            - [`backLabel: string|element`](#backlabel-stringelement)\n            - [`nextLabel: string|element`](#nextlabel-stringelement)\n            - [`finishlabel: string|element`](#finishlabel-stringelement)\n            - [`noActions: boolean`](#noactions-boolean)\n    - [`\u003cLokiStepContainer /\u003e`](#lokistepcontainer-)\n    - [`\u003cLokiStep /\u003e`](#lokistep-)\n        - [LokiStep props](#lokistep-props)\n            - [`currentStep: integer`](#currentstep-integer-required)\n            - [`totalSteps: integer`](#totalsteps-integer-required)\n            - [`step: object`](#step-object-required)\n            - [`isLokiComplete: boolean`](#islokicomplete-boolean-required)\n- [Customizing](#customizing)\n    - [`renderSteps: function`](#rendersteps-function)\n    - [`renderComponents: function`](#rendercomponents-function)\n    - [`renderActions: function`](#renderactions-function)\n\n## Usage\n\n### First define your steps\n\n```js\nconst mySteps = [\n    {\n        label: 'Step 1',\n        icon: \u003cAnyComponentYouWant /\u003e //optional,\n        component: \u003cStep1Component /\u003e,\n    },\n    ...\n];\n```\n\n### Then pass them into Loki\n\n```js\nimport React from 'react';\nimport Loki from 'react-loki';\n\nclass Demo extends React.Component {\n    _onFinish() {\n        alert('Loki finished!');\n    }\n\n    render() {\n        return (\n            \u003cdiv className=\"myWizard\"\u003e\n                \u003cLoki steps={mySteps} onFinish={this._onFinish.bind(this)} /\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n## Demo\n\nYou can also try out the [demo](https://joaocnh.github.io/react-loki)\n\n## Importing styles\n```scss\n@import \"node_modules/react-loki/umd/main.css\";\n```\n\nThese will import the default loki styles.\n\n## API\n\n### `\u003cLoki /\u003e`\n\n`\u003cLoki /\u003e` is the component that controls the wizard like behaviour\n\n#### Loki props\n\n##### `steps: array [required]`\n\nThe required steps array. A step is an object composed of:\n- label - string\n- icon - element optional \n- component - element\n\n##### `onFinish: function [required]`\n\nThe required handler function for when the wizard hits the last step.\nWhenever you click that final button of the whole wizard this function will be called.\n\n##### `backLabel: string|element`\n\nBy default the backLabel is 'Back'. This prop will allow you to replace it with a new string value or even a React Component.\n\n##### `nextLabel: string|element`\n\nBy default the nextLabel is 'Next'. This prop will allow you to replace it with a new string value or even a React Component.\n\n##### `finishLabel: string|element`\n\nBy default the finishLabel is 'Finish'. This prop will allow you to replace it with a new string value or even a React Component.\n\n##### `noActions: boolean`\n\nBy default this is `false` but you can turn it to true if you don't want the actions to be rendered. Let's say in a case where \nyou have the actions inside the custom componentRenderer (renderComponents).\n\n### `\u003cLokiStepContainer /\u003e`\n\n`\u003cLokiStepContainer /\u003e` is the component that renders the wizard progress steps `\u003col\u003e` container\n\n**react-loki** exposes it to give the option of using it whenever you want. It only needs children passed in.\n[any doubts? check the customizing section](##customizing)`\n\n### `\u003cLokiStep /\u003e`\n\n`\u003cLokiStep /\u003e` is the default component for rendering a progress step.\n\n**react-loki** exposes it to give the option of using it whenever you want.\n[any doubts? check the customizing section](##customizing)`\n\n#### LokiStep props\n\n##### `currentStep: integer [required]`\n##### `totalSteps: integer [required]`\n##### `step: object [required]`\n##### `isLokiComplete: boolean [required]`\n\nAll these props are required and are responsible for rendering out the proper classNames for the correct progress steps.\nIf a step is currently being rendered it will have the class `LokiStep-Active`.\nIf a step has been complete then it will have the class `LokiStep-Complete`.\nBy default a step already has the class `LokiStep`.\n\n## Customizing\n\nIf you don't want the default progress step look of `\u003cLokiStep /\u003e` you can always render your own components.\nThe API for this is simple. You can pass any rendering function for steps, inner components and even the buttons.\n\n#### `renderSteps: function`\n#### `renderComponents: function`\n#### `renderActions: function`\n\nThese functions receive as params `{ currentStep, stepIndex, cantBack, isInFinalStep, backHandler, nextHandler }`\n\nWith these functions you can override the total rendering logic behind `\u003cLoki /\u003e`. \nWe expose the all that info about `\u003cLoki /\u003e` so that you can have freedom in what you do.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaocnh%2Freact-loki","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoaocnh%2Freact-loki","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoaocnh%2Freact-loki/lists"}