Я занимался собакой UselocalStorage Реактируйте Хук на некоторое время, и только вчера открыл его на NPM как UselocalStorage Пакет Анкет
Вы заинтересованы в участии в открытом исходном коде? Если так, я ищу помощь, независимо от вашего уровня опыта!
Впервые участники приветствуются!
Если вам интересно, обязательно Следуйте за репозитором здесь И проверьте открытые проблемы.
Пожалуйста, дайте этому посту 💓, 🦄 и 🔖, чтобы помочь увеличить усилия!
UselocalStorage Крюк действует очень похоже на USESTATE Крюк, за исключением того, что он также сохраняет ваши государственные данные в локальном хранилище вашего браузера. Крюк доступен в JavaScript и TypeScript.
Я хорошо знаю, что в этом пакете есть альтернативы, даже хорошие альтернативы! При этом я также считаю, что больше попыток построить что -то могут быть лучше, поскольку конкуренция позволяет лучшим решениям подняться на вершину.
Я начал описывать различные задачи, с которыми я ищу помощь в GitHub выпуска страница Анкет Вот что у меня есть до сих пор:
- Добавить
Anplying.md - Добавить
Code_of_conduct.md - Предотвратить проблемы синхронизации на разных вкладках с помощью
"Хранение"Оконное событие слушатель. - Используйте крюк и предложите больше функций!
Обратите внимание, что некоторые из них, вероятно, требуют некоторого опыта React/TypeScript, но другие являются административной помощью, которая так же важна, и любой может помочь!
Установите с помощью NPM
npm i use-local-storage
Установить с пряжей
yarn add use-local-storage
В своей основной форме UselocalStorage Хук просто нужен локальный хранение ключ Вы хотите использовать. Тем не менее, рекомендуется, чтобы вы также предоставили значение по умолчанию в качестве второго аргумента в случае, если они ключ еще не существует в местном хранилище.
Следующее использование сохранится Имя пользователя переменная в "Имя" Ключ в локальном хранилище. Он будет иметь по умолчанию/начальное значение пустой строки "" Анкет Это значение по умолчанию будет только Использоваться, если в локальном хранилище уже нет значения.
import useLocalStorage from "use-local-storage";
function MyComponent() {
const [username, setUsername] = useLocalStorage("name", "");
return (
<>
{
setUsername(e.target.value);
}}
/>
);
}
Примечание: По умолчанию UselocalStorage Крюк использует Json.stringify и Json.parse сериализовать и проанализировать данные соответственно. При желании можно настроить пользовательский сериализатор и/или анализатор (обсуждается ниже в разделе «Расширенное использование»).
Использование TypeScript
Тип Имя пользователя будет выведен из вашего значения по умолчанию. В этом случае тип строка будет выведен.
Если вы используете UselocalStorage без Предоставление значения по умолчанию, или вы просто хотите указать, что Имя пользователя на самом деле другой тип, вы должны передавать тип ваших данных как общий:
import useLocalStorage from "use-local-storage";
function MyComponent() {
const [username, setUsername] = useLocalStorage("name");
return (
<>
{
setUsername(e.target.value);
}}
/>
);
}
UselocalStorage Крюк берет дополнительную третью Параметры аргумент Это позволяет настроить пользовательский сериализатор и/или анализатор, если вам нужно использовать что -то другое, кроме Json.stringify и Json.parse Анкет Параметры Объект также имеет регистратор Ключ для регистрации ошибок, попавших в крючок.
const options = {
serializer: (obj) => {
/* Serialize logic */
return someString;
},
parser: (str) => {
/* Parse logic */
return parsedObject;
},
logger: (error) => {
// Do some logging
},
};
const [data, setData] = useLocalStorage("data", { foo: "bar" }, options);
Значок хранения, изготовленная Dinosoftlabs от www.flaticon.com
Оригинал: “https://dev.to/nas5w/open-source-contributors-wanted-help-me-build-improve-a-uselocalstorage-react-hook-package-502j”